vue3+luckyexcel+php在线编辑excel文件

2023-12-28 21:04

本文主要是介绍vue3+luckyexcel+php在线编辑excel文件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

开发过程中,需要开发一个在线编辑excel文档的功能,找到了这个合适的组件

Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

可以导入文档,预览、编辑、保存、导出等功能,可以满足大部分需求

第一步:需要先安装 vue3 运行下面三个安装命令

npm install exceljs -S 
npm install luckyexcel -S
npm install file-saver

第二步:前端部分index.html 加入引用代码

<link rel='stylesheet' href='/luckysheet/pluginsCss.css' /><link rel='stylesheet' href='/luckysheet/plugins.css' /><link rel='stylesheet' href='/luckysheet/luckysheet.css' /><link rel='stylesheet' href='/luckysheet/iconfont.css' /><script src="/luckysheet/plugin.js"></script><script src="/luckysheet/luckysheet.umd.js"></script>

组件部分test.vue

<template><div style="position: absolute; top: 0"><input id="uploadBtn" type="file" @change="loadExcel" /><button class="btn" @click="getExcel">后台数据</button><span>Or文件:</span><select v-model="selected" @change="selectExcel"><option disabled value="">Choose</option><option v-for="option in options" :key="option.text" :value="option.value">{{ option.text }}</option></select><input class="inp" type="text" v-model="excelTitel"><button class="blueBtn" @click="editClicked">编辑</button><button class="btn" @click="saveExcel">保存</button><a href="javascript:void(0)" @click="downloadExcel">下载</a></div><div id="luckysheet"></div><div v-show="isMaskShow" id="tip">Downloading</div>
</template>
test.vue   script代码部分
import { ref, onMounted } from 'vue'
import http from '@/assets/js/procure-http.js'
import { exportExcel } from '@/components/export'
import LuckyExcel from 'luckyexcel'const isMaskShow = ref(false)
const selected = ref('')
const jsonData = ref({})
const excelTitel = ref('')
const congifdata = ref({container: 'luckysheet',title: "bi", // 工作簿名称lang: "zh", // 设定表格语言 国际化设置,允许设置表格的语言,支持中文("zh")和英文("en")allowCopy: false, // 是否允许拷贝showtoolbar: false, // 是否显示工具栏showinfobar: true, // 是否显示顶部信息栏showsheetbar: false, // 是否显示底部sheet页按钮showstatisticBar: false, // 是否显示底部计数栏sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 允许增加行enableAddCol: false, // 允许增加列userInfo: false, // 右上角的用户信息展示样式showRowBar: false, // 是否显示行号区域showColumnBar: false, // 是否显示列号区域sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false,//返回头部按钮rowHeaderWidth: 0,//纵坐标columnHeaderHeight: 0,//横坐标showstatisticBarConfig: {count:false,view:false,zoom:false,},showsheetbarConfig: {add: false, //新增sheetmenu: false, //sheet管理菜单sheet: false, //sheet页显示},forceCalculation: true,//强制计算公式
})
const options = ref([{ text: 'Money Manager.xlsx', value: 'https://xxxxxx/storage/salarytemp/20231222/20231222162622.xlsx' },{text: 'Activity costs tracker.xlsx', value: 'https://xxxxxx/storage/salary/20231031/0f724adf33a2d3d0b95071b0c52fb711.xlsx'}
])const loadExcel = (evt) => {const files = evt.target.filesif (files == null || files.length == 0) {alert('No files wait for import')return}let name = files[0].namelet suffixArr = name.split('.'),suffix = suffixArr[suffixArr.length - 1]if (suffix != 'xlsx') {alert('Currently only supports the import of xlsx files')return}LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {if (exportJson.sheets == null || exportJson.sheets.length == 0) {alert('Failed to read the content of the excel file, currently does not support xls files!')return}console.log('exportJson', exportJson)jsonData.value = exportJsonconsole.log(exportJson.sheets)window.luckysheet.destroy()excelTitel.value = exportJson.info.namecongifdata.value.data = exportJson.sheetscongifdata.value.title = exportJson.info.namecongifdata.value.userInfo = exportJson.info.name.creatorwindow.luckysheet.create(congifdata.value)})
}
const selectExcel = (evt) => {const value = selected.valueconst name = evt.target.options[evt.target.selectedIndex].innerTextif (value == '') {return}isMaskShow.value = trueLuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson, luckysheetfile) => {if (exportJson.sheets == null || exportJson.sheets.length == 0) {alert('Failed to read the content of the excel file, currently does not support xls files!')return}console.log('exportJson', exportJson)jsonData.value = exportJsonisMaskShow.value = falsewindow.luckysheet.destroy()window.luckysheet.create({container: 'luckysheet', //luckysheet is the container idshowinfobar: false,data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator})})
}
// 导出
const downloadExcel = () => {exportExcel(luckysheet.getAllSheets(), excelTitel.value)
}
// 从后台获取数据
const getExcel = () => {http.get('/index/index', {}, res => {if(res.code == 200) {window.luckysheet.destroy()console.log(JSON.parse(res.data))congifdata.value.data = JSON.parse(res.data)congifdata.value.title = '测试'window.luckysheet.create(congifdata.value)}})
}
// 保存excel数据
const saveExcel = () => {var excel = luckysheet.getAllSheets();//去除临时数据,减小体积for(var i in excel)excel[i].data = undefined// console.log(JSON.stringify(data))http.post('/index/update', {data:JSON.stringify(excel)}, res => {console.log(res)if(res.code == 200) {}})
}
const editClicked = () =>{congifdata.value.showtoolbar = truecongifdata.value.allowEdit = trueluckysheet.create(congifdata.value)
}
// !!! create luckysheet after mounted
onMounted(() => {luckysheet.create(congifdata.value)
})
</script><style scoped>
#luckysheet {margin: 0px;padding: 0px;position: absolute;width: 100%;left: 0px;top: 30px;bottom: 0px;height:900px;
}#uploadBtn {font-size: 16px;
}#tip {position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px;background: rgba(255, 255, 255, 0.8);text-align: center;font-size: 40px;align-items: center;justify-content: center;display: flex;
}
</style>

运行后效果如图

本地引用文件的需要下载好组件

 

这篇关于vue3+luckyexcel+php在线编辑excel文件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/547287

相关文章

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元

Python实现pdf电子发票信息提取到excel表格

《Python实现pdf电子发票信息提取到excel表格》这篇文章主要为大家详细介绍了如何使用Python实现pdf电子发票信息提取并保存到excel表格,文中的示例代码讲解详细,感兴趣的小伙伴可以跟... 目录应用场景详细代码步骤总结优化应用场景电子发票信息提取系统主要应用于以下场景:企业财务部门:需

Python处理大量Excel文件的十个技巧分享

《Python处理大量Excel文件的十个技巧分享》每天被大量Excel文件折磨的你看过来!这是一份Python程序员整理的实用技巧,不说废话,直接上干货,文章通过代码示例讲解的非常详细,需要的朋友可... 目录一、批量读取多个Excel文件二、选择性读取工作表和列三、自动调整格式和样式四、智能数据清洗五、

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

Python Pandas高效处理Excel数据完整指南

《PythonPandas高效处理Excel数据完整指南》在数据驱动的时代,Excel仍是大量企业存储核心数据的工具,Python的Pandas库凭借其向量化计算、内存优化和丰富的数据处理接口,成为... 目录一、环境搭建与数据读取1.1 基础环境配置1.2 数据高效载入技巧二、数据清洗核心战术2.1 缺失

利用Python实现Excel文件智能合并工具

《利用Python实现Excel文件智能合并工具》有时候,我们需要将多个Excel文件按照特定顺序合并成一个文件,这样可以更方便地进行后续的数据处理和分析,下面我们看看如何使用Python实现Exce... 目录运行结果为什么需要这个工具技术实现工具的核心功能代码解析使用示例工具优化与扩展有时候,我们需要将

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽