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

2022/11/182022/11/18PAGEPAGE4/5Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档前言一直想用\huniapp开发个在线多人编辑Excel文档的APP，苦于一直没找到免费的开源库，今天心血来潮，和大神聊起知道有luckysheet这么一、Luckysheet是什么？Luckysheet，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。。格式设置：样式，条件格式，文本对齐及旋转，文本截断、溢出、自动换行，多种数据类型，单元格内多样式单元格：拖拽，下拉填充，多选区，查找和替换，定位，合并单元格，数据验证行和列操作：隐藏、插入、删除行或列，冻结，文本分列操作体验：撤销、重做，复制、粘贴、剪切，快捷键，格式刷，选区拖拽公式和函数：内置公式，远程公式，自定义公式表格操作：筛选，排序增强功能：数据透视表，图表，评论，共享编辑，插入图片，矩阵计算，截图，复制到其他格式，EXCEL导入及导出等\h在线demo二、开始我们的正题1.安装Node.js版本必须6以上\hNode.jsVersion>=61.npm几个库命令行窗口进入项目的根目录然后安装npminstalljquerynpminstallluckysheetnpminstallluckyexcel2.修改main.js进入main.js修改前面几行成为importAppfrom'./App'import$from'jquery';window.$=$;window.jQuery=$;3.修改luckysheet.cssuniapp不支持装载.ico文件所以要修改，如用Vue不用改搜索找到node_modules\luckysheet\dist\css\luckysheet.css下的paint_24px.ico字符替换成1'data:font/truetype;charset=utf-8;base64,AAABAAEAFRgAAAEAIABoCAAAFgAAACgAAAAVAAAAMAAAAAEAIAAAAAAA4AcAADRFAAA0RQAAAAAAAAAA4.uniapp必须对pluginsCss.css进行重排如编译报错重排刚安装的node_modules目录下的luckysheet\dist\plugins\css下的pluginsCss.css文件5.下载安装luckysheet-plugins.rar在文后下载luckysheet-plugins.rar解压放入common文件夹安装后注意检查luckysheet_import.js文件中7到17行引入文件路径正确import'./js/jquery.mousewheel.min';import'./js/jquery-ui.min';import'./js/jquery.sPage.min';import'./js/crypto-api.min.js';import'./js/uuid.min.js';import'./js/clipboard.min.js';import'./js/spectrum.min.js';import'./js/html2canvas.min.js';import'./js/localforage.min.js';import'./js/lodash.min.js';import'./js/jstat.min.js';6.修改样式文件提示：uniapp要把将font_934335_2exjneyzm5y.css和font-awesome.min.css格式重排或format('xx'),后面加两空格，否则编译会报错·7.html中创建容器<divid="luckysheet"style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left:0px;top:0px;"></div>8.引入库importLuckyExcelfrom'luckyexcel'importluckysheetfrom"../../common/luckysheet-plugins/luckysheet_import.js"9.mounted中注册1mounted(){2varoptions={3container:'luckysheet',//luckysheet为容器id4title:'',5lang:'zh',6showinfobar:false,7data:[{8"name":"Cell",//工作表名称9"color":"",//工作表颜色10"index":0,//工作表索引11"status":1,//激活状态12"order":0,//工作表的下标13"hide":0,//是否隐藏14"row":36,//行数15"column":18,//列数16"defaultRowHeight":19,//自定义行高17"defaultColWidth":73,//自定义列宽18"celldata":[{19"r":0,20"c":0,21"v":{22"v":1232,23"ct":{24"fa":"General",25"t":"n"26},27}28},29{30"r":0,31"c":1,32"v":{33"fs":11,34"fc":"rgb(51,51,51)",35"ht":1,36"vt":1,37"v":2,38"ct":{39"fa":"General",40"t":"n"41},42"m":"2"43}44},45{46"r":0,47"c":2,48"v":{49"fc":"rgb(51,51,51)",50"ht":1,51"vt":1,52"v":3,53"ct":{54"fa":"General",55"t":"n"56},57"m":"3"58}59},60{61"r":0,62"c":3,63"v":{64"bl":0,65"it":0,66"ff":0,67"fs":11,68"fc":"rgb(51,51,51)",69"ht":1,70"vt":1,71"v":0,72"ct":{73"fa":"General",74"t":"n"75},76"m":"0",77"f":"=Formula!D3+Formula!D4"78}79},80{81"r":0,82"c":4,83"v":{84"bl":0,85"it":0,86"ff":0,87"fs":11,88"fc":"rgb(51,51,51)",89"ht":1,90"vt":191}92},93{94"r":0,95"c":5,96"v":{97"bl":0,98"it":0,99"ff":0,100"fs":11,101"fc":"rgb(51,51,51)",102"ht":1,103"vt":1104}105},106{107"r":0,108"c":6,109"v":{110"bl":0,111"it":0,112"ff":0,113"fs":11,114"fc":"rgb(51,51,51)",115"ht":1,116"vt":1117}118},119120],//初始化使用的单元格数据121"config":{122"merge":{},//合并单元格123"rowlen":{},//表格行高124"columnlen":{},//表格列宽125"rowhidden":{},//隐藏行126"colhidden":{},//隐藏列127"borderInfo":{128129},//边框130"authority":{},//工作表保护131132},133},134{135"name":"Sheet2",136"color":"",137"index":1,138"status":0,139"order":1,140"celldata":[],141"config":{}142},143{144"name":"Sheet3",145"color":"",146"index":2,147"status":0,148"order":2,149"c