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

涠洲悦海

已于 2022-04-16 14:27:40 修改

阅读量4.2k

点赞数 1

文章标签： javascript vue.js node.js 微信小程序阿里云

于 2022-04-16 13:28:27 首次发布

本文链接：https://blog.csdn.net/weixin_43416253/article/details/124211439

版权

本文介绍了如何在Vue和uniapp项目中集成Luckysheet，一个免费的前端在线表格组件。详细阐述了从安装Node.js、配置npm库到解决uniapp兼容性问题的步骤，包括修改CSS文件、引入库和注册组件的过程。虽然在uniapp中存在一些样式错误，但提供了基础的实现方法。

摘要由CSDN通过智能技术生成

前言

一直想用uniapp开发个在线多人编辑Excel文档的APP，苦于一直没找到免费的开源库，今天心血来潮，和大神聊起知道有luckysheet这么个免费的东东，看了文档，还挺合适。立即撸起。虽说是中文开发文档，但对vue的支持并不好，uniapp就更坑了，各种大坑小坑天坑，坑得怀疑人生了。爬坑过程惨不忍睹，为了给后来者少爬点天坑，现把使用方法公布。如何按方法操作还是不行，请自行烧香。如需现场指导，请提供妹子一枚：）

一、Luckysheet是什么？

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。。
格式设置：样式，条件格式，文本对齐及旋转，文本截断、溢出、自动换行，多种数据类型，单元格内多样式
单元格：拖拽，下拉填充，多选区，查找和替换，定位，合并单元格，数据验证
行和列操作：隐藏、插入、删除行或列，冻结，文本分列
操作体验：撤销、重做，复制、粘贴、剪切，快捷键，格式刷，选区拖拽
公式和函数：内置公式，远程公式，自定义公式
表格操作：筛选，排序
增强功能：数据透视表，图表，评论，共享编辑，插入图片，矩阵计算，截图，复制到其他格式，EXCEL导入及导出等

在线demo

二、开始我们的正题

1.安装Node.js

版本必须6以上
Node.js Version >= 6

1.npm几个库

命令行窗口进入项目的根目录然后安装

npm install jquery
npm install luckysheet
npm install luckyexcel

2.修改main.js

进入main.js修改前面几行成为

import App from './App'
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

3.修改luckysheet.css

uniapp不支持装载.ico文件所以要修改，如用Vue不用改
搜索找到node_modules\luckysheet\dist\css\luckysheet.css下的paint_24px.ico字符替换成

'data:font/truetype;charset=utf-8;base64,AAABAAEAFRgAAAEAIABoCAAAFgAAACgAAAAVAAAAMAAAAAEAIAAAAAAA4AcAADRFAAA0RQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxAAAA6AAAAPsAAAD6AAAA+wAAAG0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAA8wAAAP8AAAD/AAAA/wAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAA8gAAAP8AAAD/AAAA/wAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAA8gAAAP8AAAD/AAAA/wAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAA8gAAAP8AAAD/AAAA/wAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAA8gAAAP8AAAD/AAAA/wAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAA8gAAAP8AAAD/AAAA/wAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAA8gAAAP8AAAD/AAAA/wAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAA8gAAAP8AAAD/AAAA/wAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5AAAA9AAAAP8AAAD/AAAA/wAAAHkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAA3QAAAPcAAAD7AAAA7wAAAGkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGAAAAJQAAAJkAAADOAAAANgAAABEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH4AAADwAAAAqgAAAKgAAACqAAAAqgAAAKoAAACqAAAAqgAAAKoAAACqAAAAqQAAAJIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADsAAACYAAAAnQAAAJ0AAACdAAAAnQAAAJ0AAACdAAAAnQAAAJ0AAACbAAAAwQAAAP4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWQAAAPoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWgAAAPoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWgAAAPoAAACOAAAAoQAAAKEAAAChAAAAoQAAAKEAAAChAAAAoQAAAKEAAAChAAAAoQAAAKEAAAChAAAAoQAAAKEAAAChAAAAoQAAAJYAAAAgAAAAVwAAAPoAAAD+AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAABKAAAAVAAAAPkAAAD7AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAPwAAABfAAAAaAAAAPoAAAD7AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP4AAADlAAAA5gAAAPIAAAD7AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAPwAAACKAAAAUgAAAEUAAAD8AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAPwAAABNAAAAAAAAAAAAAADnAAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAO8AAABBAAAAAAAAAAD4B/gA+Af4APgH+AD4B/gA+Af4APgH+AD4B/gA+Af4APgH+AD4B/gA+AAAAPgAAAD4AAAA/AAAAPwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAA='

4.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';