1、放在public下面，开始用下面的，会报错，找不到相应的js文件，
<!-- luckysheet for bigscreen --> <link rel='stylesheet' href='./luckysheet/plugins/css/pluginsCss.css' /> <link rel='stylesheet' href='./luckysheet/plugins/plugins.css' /> <link rel='stylesheet' href='./luckysheet/css/luckysheet.css' /> <script src="./luckysheet/plugins/js/plugin.js"></script> <script src="./luckysheet/luckysheet.umd.js"></script>
2、后来修改如下：
<!-- luckysheet for bigscreen --> <link rel='stylesheet' href='<%= BASE_URL %>luckysheet/plugins/css/pluginsCss.css' /> <link rel='stylesheet' href='<%= BASE_URL %>luckysheet/plugins/plugins.css' /> <link rel='stylesheet' href='<%= BASE_URL %>luckysheet/css/luckysheet.css' /> <script src="<%= BASE_URL %>luckysheet/plugins/js/plugin.js"></script> <script src="<%= BASE_URL %>luckysheet/luckysheet.umd.js"></script>
3、上面好了后，出现下面问题
4、需要在luckysheet.umd.js 这个文件的引入chartmix进行修改，以后发布生产也要修改了，这个就比较麻烦了，以后生成还要修改成生产的，以后考虑从luckysheet源代码生成修改吧。 
5、这样就正常了，可以进行图表的展示了，如下：
6、后来发现上面的保存与预览的图标没有显示，这个是iconfont方式，应该是没有引入对，后来检查了 检查了designer的index文件，正确引入下面文件就正常了
<style src="@/assets/bs/iconfont/iconfont.css" />
7、编辑连接数据集，如下图，不过有问题浏览器兼容性还没做好，我用qq浏览器就不行，不能拖拉进去，用谷歌与edge是都可以。
8、预览如下：
9、报表设计页面代码
<!-- * @Author: lide1202@hotmail.com * @Date: 2021-3-13 11:04:24 * @Last Modified by: nbacheng * @Last Modified time: 2023-09-09 !--> <template> <div class="layout"> <div class="layout-left"> <div class="add-collection"> 数据集管理 <el-button type="text" icon="el-icon-circle-plus-outline" @click="queryAllDataSet()" /> </div> <div> <el-collapse v-for="(item, indexs) in dataSet" :key="indexs" v-model="activeNames" @change="handleChange" > <el-collapse-item :title="item.setName" :name="item.id"> <el-popconfirm :title="'确定删除' + item.setName + '吗？'" @confirm="del(item)" > <el-button slot="reference" type="text" icon="el-icon-close" class="delect-all" /> </el-popconfirm> <draggable v-model="item.setParamList" :sort="false" group="people" style="margin-left: 10px" @start="onStart(item.setCode, $event)" > <!-- <transition-group> --> <div v-for="(i, index) in item.setParamList" :key="index" class="field-container" > <div class="aRow"> <span>{{ i }}</span> </div> </div> <!-- </transition-group> --> </draggable> </el-collapse-item> </el-collapse> </div> </div> <div class="layout-middle"> <div class="push_btn"> <el-tooltip class="item" effect="dark" content="预览" placement="bottom-start" > <el-button type="text" @click="preview()"> <i class="iconfont iconfuzhi"></i> </el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="保存" placement="bottom-start" > <el-button type="text" @click="save()"> <i class="iconfont iconsave"></i> </el-button> </el-tooltip> </div> <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;" /> <div id="qrCode" ref="qrCodeDiv" /> <img id="barCode" /> </div> <div class="layout-right"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="基础配置" name="first"> <el-form ref="rightForm" :model="rightForm" label-width="70px"> <el-form-item label="坐标"> <el-input v-model="rightForm.coordinate" /> </el-form-item> <el-form-item label="值"> <el-input v-model="rightForm.value" /> </el-form-item> <el-form-item label="自动扩展" v-if="rightForm.autoIsShow"> <el-col :span="12"> <el-switch v-model="rightForm.auto" @change="autoChangeFunc($event)" /> </el-col> <el-col :span="12"> <el-tooltip class="item" effect="dark" content="只针对静态数据的单元格，具体参考文档" placement="top"> <i class="el-icon-question"> </i> </el-tooltip> </el-col> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </div> <el-dialog title="数据集管理" :visible.sync="outerVisible"> <el-table ref="multipleTable" :data="dataSetData" tooltip-effect="dark" style="width: 100%;height: 60vh;overflow-y: scroll;" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" /> <el-table-column label="数据集名称" width="120" prop="setName" /> <el-table-column prop="setDesc" label="数据集描述" width="180" /> <el-table-column prop="setCode" label="数据集编码" show-overflow-tooltip /> </el-table> <div slot="footer" class="dialog-footer"> <el-button @click="outerVisible = false">取 消</el-button> <el-button type="primary" @click="checkDataSet()">确定 </el-button> </div> </el-dialog> </div> </template> <script> import draggable from "vuedraggable"; import { queryAllDataSet, detail, detailByReportCode } from "@/api/bigscreen/excelreport"; import { addReportExcel, editReportExcel } from "@/api/bigscreen/excelreport"; import ColorPicker from "../components/colorPicker.vue"; // import QRCode from 'qrcodejs2' // import JsBarcode from 'jsbarcode' export default { name: "Excels", components: { draggable, ColorPicker }, data() { return { activeName: "first", activeNames: ["1"], reportId: null, accessKey: null, reportCode: "", options: [], sheet: {}, sheetData: [], dataSetData: [], reportExcelDto: { id: null, jsonStr: "", setCodes: "", setParam: "", reportCode: "" }, multipleSelection: [], rightForm: { coordinate: "", value: "", r: "", c: "", auto: false, autoIsShow: false }, qrCodeForm: { type: "QRCode", content: "https://www.baidu.com", width: 125, height: 125, colorDark: "#333333", // 二维码颜色 colorLight: "#ffffff", // 二维码背景色 // correctLevel: QRCode.CorrectLevel.L, // 容错率，L/M/H ri: 0, ci: 0, currentSrc: "" }, barCodeForm: { type: "BarCode", format: "CODE39", displayValue: true, content: "99999999999", lineColor: "#000", background: "#fff", width: 100, height: 40, ri: 0, ci: 0, currentSrc: "" }, formPrintSetting: { size: "", pixel1: "", pixel2: "" }, pixelList: [ { paper: "A4", width: 210, height: 297 }, { paper: "A3", width: 297, height: 420 }, { paper: "Letter", width: 216, height: 279 }, { paper: "Legal", width: 216, height: 355 }, { paper: "Executive", width: 184, height: 266 } ], dataSet: [], outerVisible: false, printVisible: false, pop: false, setCode: null, draggableFieldLabel: null, dialogVisible: false, dialogBarCode: false, paperList: [], // 纸张标识 paper: "", // 纸张宽高 width: "", height: "", // 清晰度 definition: "", // 是否套打 isBackend: "", dpi: "", pxWidth: "", pxHeight: "", show: false, config: "", settings: {}, qrCodeList: [], moveDataelse: { x: null, y: null } }; }, mounted() {}, created() { this.reportCode = this.$route.query.reportCode; this.accessKey = this.$route.query.accessKey; this.loadDataSet(); this.design(); }, methods: { handleClose() { this.printVisible = false; }, handleChange(val) {}, // 右侧信息配置tabs handleClick(tab, event) {}, async design() { // 根据reportCode获取单条报表 const { code, result } = await detailByReportCode(this.reportCode); if (result != null) { this.reportId = result.id; } console.log("result=",result); console.log("this.sheetData=",this.sheetData); this.sheetData = result == null ? [{}] : JSON.parse(result.jsonStr); console.log("this.sheetData=",this.sheetData); this.createSheet(); if (result != null) { if (result.setCodes != null && result.setCodes !== "") { let dataSetList = result.setCodes.split("|"); dataSetList.forEach(code => { this.dataSetData.forEach(setData => { if (code === setData.setCode) { this.detail(setData.id); } }); }); } } }, //初始化表格 createSheet() { //将vue对象传入 const that = this; const options = { container: "luckysheet", // 设定DOM容器的id title: "", // 设定表格名称 lang: "zh", // 设定表格语言 plugins: ["chart"], hook: { cellDragStop: function(cell, postion, sheetFile, ctx, event) { // console.info("cellDragStop-cell",cell); // console.info("cellDragStop-postion", postion); // console.info("cellDragStop-sheetFile", sheetFile); // console.info("cellDragStop-ctx",ctx); // console.info("cellDragStop-event", event); // console.log("cellDragStop-draggableFieldLabel", that); luckysheet.setCellValue( postion.r, postion.c, that.draggableFieldLabel ); }, cellMousedown: function(cell, postion, sheetFile, ctx) { //单元格点击事件 that.rightForm.coordinate = postion.r + "," + postion.c; that.rightForm.r = postion.r; that.rightForm.c = postion.c; that.rightForm.value = cell == null ? "" : cell.v; that.rightForm.autoIsShow = true //判断单元格是否是静态数据并且是合并单元格 if(cell != null && ( cell.v == undefined || cell.v.indexOf('#{') === -1)){ that.rightForm.autoIsShow = true if(cell.auto != null && cell.auto == '1'){ that.rightForm.auto = true }else{ that.rightForm.auto = false } }else{ that.rightForm.auto = false } } }, data: [ { name: "report", //工作表名称 color: "", //工作表颜色 index: 0, //工作表索引 status: 1, //激活状态 order: 0, //工作表的下标 hide: 0, //是否隐藏 row: 36, //行数 column: 18, //列数 defaultRowHeight: 19, //自定义行高 defaultColWidth: 73, //自定义列宽 celldata: [], //初始化使用的单元格数据 config: { merge: {}, //合并单元格 rowlen: {}, //表格行高 columnlen: {}, //表格列宽 rowhidden: {}, //隐藏行 colhidden: {}, //隐藏列 borderInfo: {}, //边框 authority: {} //工作表保护 }, scrollLeft: 0, //左右滚动条位置 scrollTop: 315, //上下滚动条位置 luckysheet_select_save: [], //选中的区域 calcChain: [], //公式链 isPivotTable: false, //是否数据透视表 pivotTable: {}, //数据透视表设置 filter_select: {}, //筛选范围 filter: null, //筛选配置 luckysheet_alternateformat_save: [], //交替颜色 luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色 luckysheet_conditionformat_save: {}, //条件格式 frozen: {}, //冻结行列配置 chart: [], //图表配置 zoomRatio: 1, // 缩放比例 image: [], //图片 showGridLines: 1, //是否显示网格线 dataVerification: {} //数据验证配置 } ] }; options.data = this.sheetData; $(function() { luckysheet.create(options); }); }, onStart(setCode, evt) { this.setCode = setCode; let fieldLabel = evt.item.innerText; // 列名称 this.draggableFieldLabel = "#{" + this.setCode + "." + fieldLabel + "}"; console.log("evt", evt); console.log("draggableFieldLabel", this.draggableFieldLabel); }, async loadDataSet() { const { code, result } = await queryAllDataSet(); this.dataSetData = result; if (code != "200") return; }, doCancel() { this.pop = false; }, async save() { // console.log(luckysheet.toJson()) // console.log(luckysheet.getAllSheets()) // console.log(luckysheet.getSheetData(0)) const jsonData = luckysheet.getAllSheets(); for (let i = 0; i < jsonData.length; i++) { //清空data数据，以celldata数据为主 jsonData[i]["data"] = []; } this.reportExcelDto.jsonStr = JSON.stringify(luckysheet.getAllSheets()); let setCodeList = []; let setParams = {}; this.dataSet.forEach(code => { setCodeList.push(code.setCode); if ( code.dataSetParamDtoList != null && code.dataSetParamDtoList.length > 0 ) { let dataSetParam = {}; code.dataSetParamDtoList.forEach(value => { dataSetParam[value.paramName] = value.sampleItem; }); setParams[code.setCode] = dataSetParam; } }); this.reportExcelDto.setParam = JSON.stringify(setParams); this.reportExcelDto.setCodes = setCodeList.join("|"); this.reportExcelDto.reportCode = this.reportCode; if (this.reportId == null) { const { code } = await addReportExcel(this.reportExcelDto); if (code != "200") return; this.$message.success("保存成功"); } else { this.reportExcelDto.id = this.reportId; const { code } = await editReportExcel(this.reportExcelDto); if (code != "200") return; this.$message.success("更新成功"); } }, async detailByReportCode(reportCode) { const { code, result } = await detailByReportCode(reportCode); if (result != null) { this.reportId = result.id; } }, async preview() { let routeUrl = this.$router.resolve({ path: "/excelreport/viewer", query: { reportCode: this.reportCode } }); window.open(routeUrl.href, "_blank"); }, async queryAllDataSet() { this.outerVisible = true; }, handleSelectionChange(val) { this.multipleSelection = val; }, checkDataSet() { this.outerVisible = false; if (this.multipleSelection.length > 1) { this.$message({ message: "一次最多勾选一个数据集", type: "warning" }); this.outerVisible = true; } else { this.detail(this.multipleSelection[0].id); } }, async detail(id) { const { code, result } = await detail(id); if (code != 200) return; let flag = true; this.dataSet.forEach(value => { if (value.setCode === result.setCode) { flag = false; } }); if (flag) { this.dataSet.push(result); } }, del(val) { for (let i = 0; i < this.dataSet.length; i++) { if (this.dataSet[i].setCode === val.setCode) { this.dataSet.splice(i, 1); } } }, autoChangeFunc(auto){ if(auto){ luckysheet.setCellValue(this.rightForm.r, this.rightForm.c, { auto: "1"}) }else{ luckysheet.setCellValue(this.rightForm.r, this.rightForm.c, { auto: "0"}) } } } }; </script> <style src="@/assets/bs/iconfont/iconfont.css" /> <style scoped lang="scss"> .position { position: absolute; z-index: 100; } #qrCode, #barCode { display: none; } .yulancopy { font-size: 16px; } .baocun { font-size: 17px; } .el-collapse { position: relative; border-top: 0 solid #e6ebf5; border-bottom: 0 solid #e6ebf5; } .el-collapse-item__header { border-bottom: 0 solid #e6ebf5 !important; } .delect-all { position: absolute; top: 10px; right: 30px; color: #333; } .push_btn { position: absolute; z-index: 100; top: 5px; left: 3px; .iconfont { color: black; } } .add-collection { line-height: 30px; .el-button { font-size: 16px !important; vertical-align: middle; margin-left: 20px; } } .layout { display: block; position: relative; margin: 0; padding: 0; border: 1px solid #d7dde4; } .layout-left { display: block; position: absolute; padding: 20px; width: 230px; min-height: 99.98vh; border-right: 1px solid #eee; border-color: #e8eaec; background: #fff; border-radius: 4px; font-size: 14px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; top: 0; left: 0; .field-container { display: block; position: relative; width: 100%; margin: 0; cursor: pointer; line-height: 30px; .aRow { padding: 0 10px; .operation { float: right; display: none; .el-button--text { color: #333 !important; } } &:hover { .operation { display: block; } background: #f7fafd; } } } } .layout-middle { display: block; position: absolute; left: 230px; right: 230px; width: calc(100% - 460px); margin: 0; padding: 0; .excel-designer { display: block; position: relative; margin: 0; padding: 0; } } .layout-right { display: block; position: absolute; top: 0; right: 0; padding: 20px; width: 230px; min-height: 99.98vh; border-left: 1px solid #dcdee2; border-color: #e8eaec; background: #fff; border-radius: 4px; font-size: 14px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } </style>
10、viewer代码如下：
<!-- * @Author: lide1202@hotmail.com * @Date: 2021-3-13 11:04:24 * @Last Modified by: nbacheng * @Last Modified time: 2023-09-09 !--> <template> <div class="layout"> <div class="layout-right"> <div class="block"> <div class="download"> <a v-if="reportCode != null" download="xxx.xlsx"> <el-button type="text" @click="download('gaea_template_excel')"> <i class="iconfont iconexcel"></i>导出excel </el-button> </a> <a v-if="reportCode != null" download="xxx.pdf"> <el-button type="text" @click="download('gaea_template_pdf')"> <i class="iconfont iconpdf"></i>导出pdf </el-button> </a> </div> <el-form class=""> <h2>表格查询</h2> <div v-for="(item, num) in tableData2" :key="num + 'excel'"> <h4>{{ item.name }}</h4> <div v-for="(son, y) in item.children" :key="y + 'excel2'" class="search_input" > <label>{{ son.name }}：</label> <el-input v-model="son.value" /> </div> </div> <el-button style="width: 100%" @click="searchPreview">查询</el-button> </el-form> <!--<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />--> </div> </div> <div class="layout-middle"> <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;" /> </div> </div> </template> <script> import { preview, exportExcel } from "@/api/bigscreen/excelreport"; export default { name: "Login", components: {}, data() { return { options: {}, sheet: {}, reportId: null, reportCode: null, reportName: null, dataSet: null, tableData2: [], excelData: {}, params: { reportCode: "", setParam: "" } }; }, mounted() { this.preview(); }, created() { this.reportCode = this.$route.query.reportCode; }, methods: { async searchPreview() { const arr = this.toObject(this.tableData2); this.params.setParam = JSON.stringify(arr); //每次都重新加载需要改成刷新 this.preview(); }, async preview() { this.excelData = {}; this.params.reportCode = this.reportCode; const { code, result } = await preview(this.params); if (code != 200) return; this.reportName = JSON.parse(result.jsonStr).name; // 渲染查询表单 this.params.setParam = JSON.parse(result.setParam); const extendArry = []; const extendObj = this.params.setParam; for (const i in extendObj) { const children = []; for (const y in extendObj[i]) { children.push({ name: y, value: extendObj[i][y] }); } extendArry.push({ name: i, children: children }); } this.tableData2 = extendArry; this.excelData = result.jsonStr; this.sheetData = result == null ? [{}] : JSON.parse(result.jsonStr); // console.log(this.excelData) // console.log(this.sheetData) this.createSheet(); }, async download(val) { if (val == "gaea_template_pdf") { this.$message("暂不支持pdf"); return; } const result = {}; result["reportCode"] = this.reportCode; result["setParam"] = JSON.stringify(this.params.setParam); if (val != "") { result["exportType"] = val; } const { code, message } = await exportExcel(result); if (code != 200) return; this.$message.success(message); }, // 表单封装json toObject(val) { const objfirst = {}; const objSecond = {}; val.forEach(el => { el.name ? (objfirst[el.name] = el.children) : ""; }); for (const key in objfirst) { const newObj = {}; objfirst[key].map(ev => { Object.assign(newObj, { [ev.name]: ev.value }); }); objSecond[key] = newObj; } return objSecond; }, //初始化表格 createSheet() { const options = { container: "luckysheet", // 设定DOM容器的id title: "", // 设定表格名称 lang: "zh", // 设定表格语言 plugins: ["chart"], data: [ { name: "report", //工作表名称 color: "", //工作表颜色 index: 0, //工作表索引 status: 1, //激活状态 order: 0, //工作表的下标 hide: 0, //是否隐藏 row: 36, //行数 column: 18, //列数 defaultRowHeight: 19, //自定义行高 defaultColWidth: 73, //自定义列宽 celldata: [], //初始化使用的单元格数据 config: { merge: {}, //合并单元格 rowlen: {}, //表格行高 columnlen: {}, //表格列宽 rowhidden: {}, //隐藏行 colhidden: {}, //隐藏列 borderInfo: {}, //边框 authority: {} //工作表保护 }, scrollLeft: 0, //左右滚动条位置 scrollTop: 315, //上下滚动条位置 luckysheet_select_save: [], //选中的区域 calcChain: [], //公式链 isPivotTable: false, //是否数据透视表 pivotTable: {}, //数据透视表设置 filter_select: {}, //筛选范围 filter: null, //筛选配置 luckysheet_alternateformat_save: [], //交替颜色 luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色 luckysheet_conditionformat_save: {}, //条件格式 frozen: {}, //冻结行列配置 chart: [], //图表配置 zoomRatio: 1, // 缩放比例 image: [], //图片 showGridLines: 1, //是否显示网格线 dataVerification: {} //数据验证配置 } ] }; options.data = this.sheetData; // console.log(this.sheetData) $(function() { luckysheet.create(options); }); } } }; </script> <style src="@/assets/bs/iconfont/iconfont.css" /> <style scoped lang="scss"> .download { width: 100%; float: left; button { color: #444; width: 90px; text-align: left; .svg-icon { font-size: 16px; margin-right: 10px; } } } .block { position: relative; z-index: 10000; top: 0; background: #fff; width: 100%; h2 { font-size: 14px; line-height: 30px; } h4 { font-size: 12px; } .search_input { font-size: 12px; margin-bottom: 10px; label { line-height: 20px; } } } .layout { display: block; position: relative; margin: 0; padding: 0; } .layout-middle { display: block; position: absolute; left: 200px; right: 0; width: calc(100% - 200px); margin: 0; padding: 0; .excel-designer { display: block; position: relative; margin: 0; padding: 0; } } .layout-right { display: block; position: absolute; top: 0; left: 0; padding: 20px; width: 200px; min-height: 99.98vh; border-left: 1px solid #dcdee2; border-color: #e8eaec; background: #fff; border-radius: 4px; font-size: 14px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } </style>
