Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档.docx

《Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档.docx》由会员分享，可在线阅读，更多相关《Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档.docx（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022/11/18Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档4/5前言一直想用uniapp 开发个在线多人编辑Excel文档的APP，苦于一直没找到免费的开源库，今天心血来潮，和大神聊起知道有luckysheet这么一、Luckysheet是什么？Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。格式设置：样式，条件格式，文本对齐及旋转，文本截断、溢出、自动换行，多种数据类型，单元格内多样式单元格：拖拽，下拉填充，多选区，查找和替换，定位，合并单元格，数据验证行和列操作：隐藏、插入、删除行或列，冻结，文本分列操作体验

2、：撤销、重做，复制、粘贴、剪切，快捷键，格式刷，选区拖拽公式和函数：内置公式，远程公式，自定义公式表格操作：筛选，排序增强功能：数据透视表，图表，评论，共享编辑，插入图片，矩阵计算，截图，复制到其他格式，EXCEL导入及导出等在线demo二、开始我们的正题1.安装Node.js版本必须6以上Node.js Version = 61.npm几个库命令行窗口进入项目的根目录然后安装1 npm install jquery2 npm install luckysheet3 npm install luckyexcel2.修改main.js进入main.js修改前面几行成为1 import App f

3、rom ./App2 import $ from jquery;3 window.$ = $;4 window.jQuery = $;3.修改luckysheet.cssuniapp不支持装载.ico文件所以要修改，如用Vue不用改搜索找到node_modulesluckysheetdistcssluckysheet.css下的paint_24px.ico字符替换成1 data:font/truetype;charset=utf-8;base64,AAABAAEAFRgAAAEAIABoCAAAFgAAACgAAAAVAAAAMAAAAAEAIAAAAAAA4AcAADRFAAA0RQAAAA

4、AAAAAA4.uniapp必须对pluginsCss.css进行重排如编译报错重排刚安装的node_modules目录下的luckysheetdistpluginscss下的pluginsCss.css文件5.下载安装luckysheet-plugins.rar在文后下载luckysheet-plugins.rar解压放入common文件夹安装后注意检查luckysheet_import.js文件中7到17行引入文件路径正确1 import ./js/jquery.mousewheel.min;2 import ./js/jquery-ui.min;3 import ./js/jquery.

5、sPage.min;4 import ./js/crypto-api.min.js;5 import ./js/uuid.min.js;6 import ./js/clipboard.min.js;7 import ./js/spectrum.min.js;8 import ./js/html2canvas.min.js;9 import ./js/localforage.min.js;10 import ./js/lodash.min.js;11 import ./js/jstat.min.js;6.修改样式文件提示：uniapp要把将font_934335_2exjneyzm5y.css和

6、font-awesome.min.css格式重排或format(xx),后面加两空格，否则编译会报错7.html中创建容器1 2 8.引入库1 import LuckyExcel from luckyexcel2 import luckysheet from ././common/luckysheet-plugins/luckysheet_import.js9.mounted中注册1mounted() 2var options = 3container: luckysheet, /luckysheet为容器id4title: ,5lang: zh,6showinfobar: false,7da

7、ta: 8name: Cell, /工作表名称9color: , /工作表颜色10index: 0, /工作表索引11status: 1, /激活状态12order: 0, /工作表的下标13hide: 0, /是否隐藏14row: 36, /行数15column: 18, /列数16defaultRowHeight: 19, /自定义行高17defaultColWidth: 73, /自定义列宽18celldata: 19r: 0,20c: 0,21v: 22v: 1232,23ct: 24fa: General,25t: n26,2728,2930r: 0,31c: 1,32v: 33fs

8、: 11,34fc: rgb(51, 51, 51),35ht: 1,36vt: 1,37v: 2,38ct: 39fa: General,40t: n41,42m: 24344,4546r: 0,47c: 2,48v: 49fc: rgb(51, 51, 51),50ht: 1,51vt: 1,52v: 3,53ct: 54fa: General,55t: n56,57m: 35859,6061r: 0,62c: 3,63v: 64bl: 0,65it: 0,66ff: 0,67fs: 11,68fc: rgb(51, 51, 51),69ht: 1,70vt: 1,71v: 0,72ct:

9、 73fa: General,74t: n75,76m: 0,77f: =Formula!D3+Formula!D47879,8081r: 0,82c: 4,83v: 84bl: 0,85it: 0,86ff: 0,87fs: 11,88fc: rgb(51, 51, 51),89ht: 1,90vt: 19192,9394r: 0,95c: 5,96v: 97bl: 0,98it: 0,99ff: 0,100fs: 11,101fc: rgb(51, 51, 51),102ht: 1,103vt: 1104105,106107r: 0,108c: 6,109v: 110bl: 0,111it

10、: 0,112ff: 0,113fs: 11,114fc: rgb(51, 51, 51),115ht: 1,116vt: 1117118,119120, /初始化使用的单元格数据121config: 122merge: , /合并单元格123rowlen: , /表格行高124columnlen: , /表格列宽125rowhidden: , /隐藏行126colhidden: , /隐藏列127borderInfo: 128129, /边框130authority: , /工作表保护131132,133,134135name: Sheet2,136color: ,137index: 1,138status: 0,139order: 1,140celldata: ,141config: 142,143144name: Sheet3,145color: ,146index: 2,147status: 0,148order: 2,149celldata: ,150config: ,151152153154155luckysheet.create(options)156157,总结完成，目前uniapp使用中选择字体颜色样式有错乱。欢迎大神补一刀，把坑添平。下载luckysheet-plugins.rar