纯前端可编辑报表框架 LuckySheet

纯前端可编辑报表框架 LuckySheet

在线文档API：

https://mengshukeji.github.io/LuckysheetDocs/guide/#introduction
https://mengshukeji.github.io/LuckysheetDocs/zh/

1、luckysheet源文件打包到项目中

1、安装
npm install
npm install gulp -g

2、发展
npm run dev

3、打包
npm run build

2、项目中本地导入

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

3、以上导入的js文件记得有一个需要修改请求方式（get/post）忘记了

4、vue中引入

    import {exportExcel} from "../../../../utils/export";
    import LuckyExcel from 'luckyexcel'

5、创建容器

<!-- luckysheet容器 -->
<div v-loading="loading" element-loading-text="数据加载中...">
    <div id="luckysheet" style="width:100%" :style="heights"></div>
</div>

6、data

       data() {
            return {
                loading: false,// loading

                options: {
                container: "luckysheet", //容器的ID
                lang: "zh", // 设定表格语言 国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")
                forceCalculation: true,//强制计算公式
                showtoolbar: true, //是否显示工具栏
                showinfobar: false, // 是否显示顶部信息栏
                showsheetbar: true, //是否显示底部sheet按钮
                loadUrl: '',
                hook: {
                       cellMousedown: this.cellMousedown,//绑定鼠标事件
                       },
                   },
            }
        },

加载方式1：通过Excel文件地址

不需要配合data中的options使用，需要将其注释
    
LuckyExcel.transformExcelToLuckyByUrl(excelUrl, excelName, (exportJson, luckysheetfile) => {

if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert("读取excel文件内容失败，目前不支持xls文件！");
return;
}

this.isMaskShow = false;
window.luckysheet.destroy();

window.luckysheet.create({
container: 'luckysheet', //luckysheet is the container id
showinfobar: false,
data: exportJson.sheets,
title: exportJson.info.name,
userInfo: exportJson.info.name.creator
});
});

加载方式2：通过JSON文件地址

配合data中的options使用
this.options.loadUrl = this.baseUrl + res.data.data.url

window.luckysheet.create(this.options)

加载方式3：通过JSON字符串

配合data中的options使用
this.options.data = JSON.parse(res.data.data)

window.luckysheet.create(this.options)

备注：其他内容参考在线文档和案例即可