vue3集成LuckySheet实现导入本地Excel进行在线编辑

第一步:克隆或者下载下面的代码

git clone https://github.com/dream-num/Luckysheet.git

第二步:安装依赖

npm install
npm install gulp -g  

第三步:运行

npm run dev

效果如下图所示
在这里插入图片描述
第四步:打包
打包执行成功后,在文件夹目录下会出现dis文件夹,如下图所示:

npm run build

在这里插入图片描述
第五步:本地引入

把dist文件夹中的代码全部复制粘贴到你项目的public文件夹中,index.html文件除外。在你项目的index.html文件中引入如下代码,如果你复制的位置是其他地方,需要用绝对路径引入这些文件。
<link rel='stylesheet' href='./public/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./public/plugins/plugins.css' />
<link rel='stylesheet' href='./public/css/luckysheet.css' />
<link rel='stylesheet' href='./public/assets/iconfont/iconfont.css' />
<script src="./public/plugins/js/plugin.js"></script>
<script src="./public/luckysheet.umd.js"></script>		

接下来就是在项目中使用这个插件
首先要引入luckyexcel 的依赖,我们导入导出本地excel会用到

 npm install luckyexcel --save如果引入依赖报错可能是依赖冲突,可以使用下面的npm install luckyexcel --save --force

然后创建一个vue页面文件

<template><div><div style="height: 10px;position: absolute"><el-uploadref="upload"class="upload-demo"action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15":limit="1":on-change="handleFileChange":auto-upload="false"accept=".xlsx"><template #trigger><el-button type="primary">select file</el-button></template></el-upload></div><div v-if="isShow" id="luckysheet" class="luckysheet-wrap"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import LuckyExcel from 'luckyexcel';
import {ElMessage} from "element-plus";const isShow = ref(false)function handleFileChange(file, newFileList) {const selectedFile = file.raw;if (!(selectedFile instanceof File)) {console.error('传入了非文件对象');return;}if (selectedFile.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {console.log('文件是xlsx类型');} else {console.error('不是xlsx文件');ElMessage.error('请选择xlsx类型文件')return;}let filename = selectedFile.name.replace(/\.[^/.]+$/, ""); // 去除文件扩展名let reader = new FileReader();reader.onload = async (e) => {let fileData = e.target.result;try {isShow.value = trueLuckyExcel.transformExcelToLucky(fileData, async (exportJson, luckysheetfile) => {console.log(exportJson.sheets)creatExcel(filename, JSON.stringify(exportJson.sheets))});} catch (e) {console.error(e);}};reader.onerror = function() {console.error("File could not be read! Code " + reader.error.code);};reader.readAsArrayBuffer(selectedFile);
}function creatExcel(title, content){const options = {container: 'luckysheet', // 设定DOM容器的idtitle: 'excel 表格', // 设定表格名称lang: 'zh', // 设定表格语言hook: {updated: (e) => {//监听更新,并在1s后自动保存$('#luckysheet_info_detail_save').text("已修改")let title = $('#luckysheet_info_detail_input').val();let content = luckysheet.getAllSheets();//去除临时数据,减小体积for (let i in content)content[i].data = undefinedconsole.log(title)console.log(content)}},}options.data = JSON.parse(content)options.title = title;window.luckysheet.create(options)
}onMounted(() => {});
</script><style scoped>
.luckysheet-wrap {margin: 0px;padding: 0px;position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;
}
</style>

在这里插入图片描述
点击按钮选择一个xlsx文件就能导入成功了,效果如下(这里只能导入xlsx文件,导入xls文件会报错,暂时不知道什么原因,如果有xls文件的话可以把表格另存为xlsx类型的文件再导入)
在这里插入图片描述
下面放一个完整的demo展示效果

<template><div style="width: 100%; height: 100vh;overflow: auto;"><div><div style="display: flex;"><div style="margin-right: 10px;"><el-upload ref="upload" :auto-upload="false" accept=".xlsx" :show-file-list='false' :on-change="handleChangeUpload"action="#" class="upload-demo" multiple><el-button type="primary">导入</el-button></el-upload></div><el-button type="primary" @click="goBack()">返回</el-button></div></div><span>电源配线图</span><el-table :data="dataList" width="100%" border :max-height="750"><el-table-column label="序号" align="center" key="id" prop="id" fixed width="100px" /><el-table-column label="模板名称" align="left" key="name" prop="name"/><el-table-column label="导入时间" align="center" key="addTime" prop="addTime"/><el-table-column label="编辑时间" align="center" key="upTime" prop="upTime"/><el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"><template #default="scope"><el-button link type="primary" icon="Edit" @click="updateData(scope.row)">编辑</el-button><el-button link type="primary" icon="Delete" @click="deleteData(scope.row)">删除</el-button></template></el-table-column></el-table><paginationv-show="total > 0":total="total"v-model:page="pageNum"v-model:limit="pageSize"@pagination="getDataList":page-sizes="[5, 10, 20, 50]"/></div>
</template><script setup>import {onBeforeUnmount, ref} from "vue";
import {ElMessage} from "element-plus";
import {closeWindow, openCenteredWindow, verifyCommand} from "../../openWindow";
import {useRouter} from "vue-router";
import {deletePower, importPower, selectPowerList} from "../../../../api/draw/power";
import LuckyExcel from 'luckyexcel';const {proxy} = getCurrentInstance();
const router = useRouter();const dataList = ref([])const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)//查询数据
function getDataList(){selectPowerList({pageNum: pageNum.value,pageSize: pageSize.value}).then(result => {dataList.value = result.rowstotal.value = result.total})
}//删除数据
async function deleteData(row){if ( await verifyCommand() ){proxy.$confirm('确定删除吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let data = {id: row.id,}deletePower(data).then(res=>{if (res.code === 200){getDataList()ElMessage.success('删除成功!');}else {ElMessage.error('删除失败')}})}).catch(() => {proxy.$message({type: 'info',message: '取消删除'});});}
}//编辑按钮
function updateData(row){router.push({name: 'excel',state: {id: row.id,title: row.name,content: row.content,}});
}function handleChangeUpload(file) {const selectedFile = file.raw;if (!(selectedFile instanceof File)) {console.error('传入了非文件对象');return;}if (selectedFile.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {console.log('文件是xlsx类型');} else {console.error('不是xlsx文件');ElMessage.error('请选择xlsx类型文件')return;}let filename = selectedFile.name.replace(/\.[^/.]+$/, ""); // 去除文件扩展名let reader = new FileReader();reader.onload = async (e) => {let fileData = e.target.result;try {LuckyExcel.transformExcelToLucky(fileData, async (exportJson, luckysheetfile) => {console.log(exportJson.sheets)//更改配置中的行数为当前最大行//exportJson.sheets[0].config.rowlen = exportJson.sheets[0].celldata[exportJson.sheets[0].celldata.length-1].r+2let data = {name: filename,content: JSON.stringify(exportJson.sheets)}importPower(data).then(res=>{if (res.code === 200){getDataList()ElMessage.success('导入成功')}else {ElMessage.error(res.msg)}})});} catch (e) {console.error(e);}};reader.onerror = function() {console.error("File could not be read! Code " + reader.error.code);};reader.readAsArrayBuffer(selectedFile);
}onBeforeUnmount (() => {closeWindow();
});// 监听页面即将刷新的事件
window.addEventListener('beforeunload', function (event) {closeWindow();
});const goBack = () => {router.go(-1); // 返回上一页
};getDataList();
</script><style scoped></style>

在这里插入图片描述

<template><div><div id="luckysheet" class="luckysheet-wrap"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import {ElMessage} from "element-plus";
import {updatePower} from "../../../api/draw/power";onMounted(() => {setExcelData();setExcelStyle();
});//对表格数据进行渲染
function setExcelData(){let title = history.state.title;let content = history.state.content;const options = {container: 'luckysheet', // 设定DOM容器的idtitle: 'excel 表格', // 设定表格名称lang: 'zh', // 设定表格语言hook: {updated: (e) => {//监听更新,并在1s后自动保存$('#luckysheet_info_detail_save').text("已修改")let title = $('#luckysheet_info_detail_input').val();let content = luckysheet.getAllSheets();//去除临时数据,减小体积for (let i in content)content[i].data = undefined}},}options.data = JSON.parse(content)options.title = title;window.luckysheet.create(options)
}//对默认表格的样式进行修改
function setExcelStyle(){//去除左上角logolet leftLogo = document.querySelector('.luckysheet-share-logo');leftLogo.className = '';//去除左上角返回按钮let leftButton = document.getElementById('luckysheet_info_detail_title');leftButton.remove();// 创建一个新的保存按钮let newDiv = document.createElement('div');newDiv.innerHTML = '保存';newDiv.style.cursor = 'pointer'newDiv.addEventListener('click', function() {saveData();});let firstChild = document.querySelector('#luckysheet_info_detail').firstElementChild;document.querySelector('#luckysheet_info_detail').insertBefore(newDiv, firstChild);
}//保存数据
function saveData(){let title = $('#luckysheet_info_detail_input').val();let content = luckysheet.getAllSheets();//去除临时数据,减小体积for (let i in content)content[i].data = undefined//更改配置中的行数为当前最大行content[0].config.rowlen = content[0].celldata[content[0].celldata.length-1].r+2let id = history.state.idlet data = {id: id,name: title,content: JSON.stringify(content)}updatePower(data).then(res=>{if (res.code === 200){history.state.title = title;history.state.content = JSON.stringify(content);ElMessage.success('保存成功!');}else {ElMessage.error('保存失败')}})
}
</script><style scoped>
.luckysheet-wrap {margin: 0px;padding: 0px;position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;
}
</style>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3280346.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

TypeError: Components is not a function

Vue中按需引入Element-plus时&#xff0c;报错TypeError: Components is not a function。 1、参考Element-plus官方文档 安装unplugin-vue-components 和 unplugin-auto-import这两款插件 2、然后需要在vue.config.js中配置webPack打包plugin配置 3、重新启动项目会报错 T…

程序员开发指南

在这个快节奏的时代&#xff0c;作为一名程序员&#xff0c;大家都希望能更快地开发出高质量的应用&#xff0c;而不是花费大量时间在基础设施和后台服务的搭建上。今天&#xff0c;我要向大家介绍一款专为懒人开发者准备的一站式开发应用的神器——MemFire Cloud。 一站式开发…

制品库nexus

详见&#xff1a;Sonatype Nexus Repository搭建与使用&#xff08;详细教程3.70.1&#xff09;-CSDN博客 注意事项&#xff1a; 1.java8环境使用nexus-3.69.0-02-java8-unix.tar.gz包 2.java11环境使用nexus-3.70.1-02-java11-unix.tar.gz包 3.注意使用制品库/etc/yum.repos.…

动物大联盟游戏攻略:必备游戏攻略!VMOS云手机升级攻略教程!

在《动物大联盟》中&#xff0c;合理的称号选择、活动参与和组队合作可以极大提升游戏体验和效率。以下是详细的攻略建议&#xff1a; 称号选择 称号不仅能展示玩家的实力和成就&#xff0c;还能提供额外的属性加成。合理选择和更换称号是提升战力的重要途径。 前期称号选择&…

Matlab编程资源库(19)级数与符号方程求解

一、级数符号求和 求无穷级数的和需要 符号表达式求和函数 symsum &#xff0c;其调用 格式为&#xff1a; symsum(s,v,n,m) 其中 s 表示一个级数的通项&#xff0c;是一个符号表达式。 v 是求和变 量&#xff0c; v 省略时使用系统的默认变量。 n 和 m 是求和的开始项 和…

【康复学习--LeetCode每日一题】3111. 覆盖所有点的最少矩形数目

题目&#xff1a; 给你一个二维整数数组 point &#xff0c;其中 points[i] [xi, yi] 表示二维平面内的一个点。同时给你一个整数 w 。你需要用矩形 覆盖所有 点。 每个矩形的左下角在某个点 (x1, 0) 处&#xff0c;且右上角在某个点 (x2, y2) 处&#xff0c;其中 x1 < x…

职业教育计算机网络综合实验实训室建设应用案例

近年来&#xff0c;职业教育在培养技能型人才方面发挥着越来越重要的作用。然而&#xff0c;传统的计算机网络技术教学模式往往重理论、轻实践&#xff0c;导致学生缺乏实际操作能力和职业竞争力。为了改变这一现状&#xff0c;唯众结合职业教育特点&#xff0c;提出了“教、学…

04.FreeRTOS任务创建

04. FreeRTOS任务创建与任务删除 1. FreeRTOS创建和删除任务相关API函数 函数描述xTaskCreate()动态方式创建任务xTaskCreateStatic()静态方式创建任务xTaskCreateRestricted()动态方式创建使用 MPU 限制的任务xTaskCreateRestrictedStatic()静态方式创建使用 MPU 限制的任务…

C# Unity 面向对象补全计划 之 继承(字段与属性)

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列旨在通过补全学习之后&#xff0c;给出任意类图都能实现并做到逻辑上严丝合缝 Q&#xff1a;为什么要单讲继承字段与属性&#xff0c;不讲继承方法了吗&#x…

Centos 7配置问题

在VMWare12上面安装Centos 7 Linux虚拟机&#xff0c;在切换到命令界面时&#xff0c;需要登录用户名和密码&#xff0c;但发现输入用户后有字符显示&#xff0c;但是密码没有。 经过一系列查看后&#xff0c;发现这个是Linux的一种机制&#xff0c;即当你输入密码时不显示&…

为什么阿里开发手册不建议使用Date类?

在日常编码中&#xff0c;基本上99%的项目都会有一个DateUtil工具类&#xff0c;而时间工具类里用的最多的就是java.util.Date。 大家都这么写&#xff0c;这还能有问题&#xff1f;&#xff1f; 当你的“默认常识”出现问题&#xff0c;这个打击&#xff0c;就是毁灭性的。 …

Python学习计划——7.2数据可视化

数据可视化是数据分析的重要组成部分&#xff0c;通过图表和图形将数据直观地展示出来&#xff0c;帮助我们发现数据中的模式和趋势。Python中常用的数据可视化库有matplotlib和seaborn。以下是对这些库的详细讲解及可运行的Python案例。 1. matplotlib 库 matplotlib 是一个…

Git 基础操作手册:轻松掌握常用命令

Git 操作完全手册&#xff1a;轻松掌握常用命令 引言一、暂存&#xff1a;git add ✏️二、提交&#xff1a;git commit &#x1f4dd;三、拉取、拉取合并 &#x1f504;四、推送&#xff1a;git push &#x1f310;五、查看状态&#xff1a;git status &#x1f4ca;六、查看历…

数据库管理-第225期 Oracle DB 23.5新特性一览(20240730)

数据库管理225期 2024-07-30 数据库管理-第225期 Oracle DB 23.5新特性一览&#xff08;20240730&#xff09;1 二进制向量维度格式2 RAC上的复制HNSW向量索引3 JSON集合4 JSON_ID SQL函数5 优化的通过网络对NVMe设备的Oracle的原生访问6 DBCA支持PMEM存储7 DBCA支持标准版高可…

[PM]面试题-工作问题

画一个原型需要多久?写一篇PRD文档需求多久? 时间长短取决于项目规模和业务难度, 规模大难度高,就要花费很长的时间, 规模下难度低时间就短, 一般来说, 1-2周的时间就可以完成原型和RED文档 市场需求文档写什么? 从打到下进行编写, 大的方面以市场为主体,包括市场规模, 发…

AI-PaddleOCR2.8在VS2019编译运行基于C++引擎推理CPU版本

1、下载PaddleOCR-release-2.8开源项目 https://github.com/PaddlePaddle/PaddleOCR https://github.com/PaddlePaddle/PaddleOCR/releases https://gitee.com/paddlepaddle/PaddleOCR?_fromgitee_search 2、下载安装Windows预测库 https://paddleinference.paddlepaddle.o…

轻量级服务器资源监控平台Beszel

什么是 Beszel &#xff1f; Beszel 是一个轻量级平台&#xff0c;借助 Beszel&#xff0c;可以访问 CPU 和内存使用情况的历史数据&#xff0c;以及 Docker 容器指标&#xff08;例如特定于容器的 CPU 和内存统计信息&#xff09;。还能收到针对潜在问题的可自定义警报通知&am…

【Docker】安装 Docker(Server-Centos、GUI-Windows11)—— 超详细教程

一、各版本平台支持情况 1、Server 版本 2、桌面版本 二、Server 版本安装&#xff08;Centos&#xff09; 1、安装依赖 &#xff08;1&#xff09;支持的操作系统 CentOS 7&#xff1a;推荐 CentOS 8 (stream) CentOS 9 (stream) &#xff08;2&#xff09;支持的 CPU A…

spring源码 循环依赖

spring框架两大核心&#xff1a;IOC和AOP IOC(Inverse of Control)控制反转 将对象的创建权交给 Spring 容器去创建&#xff0c;利用了工厂模式将对象交给容器管理&#xff0c;只需要在spring配置文件中配置相应的bean&#xff0c;以及设置相关的属性&#xff0c;让spring容器…

华为机试HJ76尼科彻斯定理

华为机试HJ76尼科彻斯定理 题目&#xff1a; 想法&#xff1a; 从题目可以找到规律&#xff0c;输出的第一个奇数为 ( 当前输入数值 − 1 ) 当前输入数值 1 (当前输入数值-1)当前输入数值1 (当前输入数值−1)当前输入数值1&#xff0c;输出是连续的输入数值个数个奇数&#…