VUE 项目中使用luckysheet
描述资料本地引入组件开发创建组件组件使用使用中遇到的问题1. 后台图表chartMix报undefined2. 回显时默认显示第一个sheet3. 单元格内换行后复制报错4. 公式栏不显示类似html元素的值
其他问题的解决
描述
Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。但目前仅支持xlsx格式。
资料
官方文档： 快速上手 | Luckysheet文档 参考： 配置项 导出需要用到的export.js
本地引入
官网下载源码安装依赖：运行命令npm i打包：运行命令npm run build，会得到文件夹dist复制dist文件夹中所有文件除了（除了index.html）粘贴到自己的项目在Vue 项目的public 目录下。Vue 项目中安装scriptjs：运行命令npm i scriptjs前端方法导出需要安装exceljs、file-saver
组件开发
创建组件
//LuckyExcel.scss
.document{
position: relative;
width:100%;
height: 100%;
-webkit-animation-fill-mode: none;
animation-fill-mode: none;
.luckysheetContainer{
margin:0px;
padding:0px;
position:absolute;
width:100%;
left: 0px;
top: 0px;
bottom:0px;
}
}
组件使用
注意：
全局只能创建一个LuckyExcel，创建多个最后只会显示最后一个一定要传入不同的id
//html
//组件引入
components:{
LuckyExcel: () => import('@/components/LuckyExcel/LuckyExcel.vue'),
},
//methods
load(){
this.viewLEData = content;//获取到的表格数据
if(this.showViewLuckyExcel){//true代表已经加载过LuckyExcel，直接调用组件中的创建函数来加载LuckyExcel
this.$refs.viewLuckyExcel.createROLuckyExcel();
}else{
this.showViewLuckyExcel = true;
};
},
使用中遇到的问题
1. 后台图表chartMix报undefined
原因是引用地址错误。 将luckysheet.umd.js中expendPlugins/chart/chartmix.umd.min.js改为luckysheet/expendPlugins/chart/chartmix.umd.min.js。expendPlugins/chart/chartmix.css改为luckysheet/expendPlugins/chart/chartmix.css。
2. 回显时默认显示第一个sheet
let getLuckyexcelData = this.$refs.luckyexcel.getLuckysheetData(); // 获取luckysheet数据
//显示默认显示第一个sheet
getLuckyexcelData.forEach((item,index) => {
if(index == 0){
item.status = 1;
}else{
item.status = 0;
};
});
3. 单元格内换行后复制报错
解决Luckysheet单元格内换行后复制报错问题
4. 公式栏不显示类似html元素的值
解决Luckysheet公式栏不显示类似html元素的值
5. 导入带批注的Excel文件成功，但是批注消失
导入带批注的Excel文件成功，但是批注消失
6. 无法将图片插入到单元格中
无法将图片插入到单元格中
7. 只读模式下禁止复制
只读模式下禁止复制
8. 打印功能
打印功能 luckysheet实现打印
9. 单元格输入单引号后无法删除
单元格输入单引号后无法删除
10. 只读模式下禁止键盘按钮
(1) 修改文件keyboard.js
import { checkIsAllowEdit } from '../global/validate';
(2) keydown监听事件
mounted(){
window.addEventListener(
"keydown",
(e) => {
if(
(e.ctrlKey && e.code == "KeyC") ||
(e.ctrlKey && e.code == "KeyX") ||
(e.metaKey && e.code == "KeyC") ||
(e.metaKey && e.code == "KeyX")
){
e.stopPropagation();
}
},{capture:true}
);
},
其他问题的解决
其他问题的解决
相关链接
发表评论