免费开源luckysheet+luckyExcel，本地导入文件，渲染excel，公式计算，导出excel_lucky sheet

项目需求：

本地导入excel，页面渲染excel，一键计算：根据计算逻辑求出得分回写到对应单元格，最后导出excel；

前端技术：Vue2，luckysheet，luckyExcel，exceljs，mathjs，antdv

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

上传下载demo：  luckysheet-demo: luckysheet-demo

用到的插件和api：

1，本地导入excel并渲染

npm下载luckysheet后通过 import 方式引入报错，官网给出了两种引入方式：CDN , 本地引入；CDN没什么说的直接引入即可，此次介绍一下本地引入；

快速上手 | Luckysheet文档

//文件上传按钮
<div> 
         <a-upload
          :file-list="fileList"
          name="file"
          :multiple="false"  //禁止多选
          :showUploadList="{showRemoveIcon: false}"  //隐藏删除文件icon
          :before-upload="handleUpload"
        >
          <a-button type="primary" class="upload">
           点击上传
          </a-button>
        </a-upload>
        <div class="uploadTip">
          只能上传xlsx文件！
        </div>
 </div>
 
 //渲染excel容器
 <div id="luckysheet" class="luckySheet" v-show="showLuckyExcel"></div>
 
 
//-----methods----------------------------------------------
import LuckyExcel from 'luckyexcel'; //引入LuckyExcel
//luckysheet 引入报错，官网给出了两种引入方式：CDN , 本地引入
 
//（1）上传文件
 handleUpload(file){     
      if(file.name.substring(file.name.length-5) === '.xlsx'){
          this.spinning = true
          this.spinningTip =  '文件上传中...'
          this.file = file;
          this.fileList = [file]; //只允许上传一个文件
          LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {
             luckysheet.destroy();
             this.initExcel(exportJson);
          },error =>{
            this.$message.error(error)
          });
          return false;
      }else{
        this.$message.error('文件格式错误，请上传.xlsx文件！')
      }
    },
 
//(2)渲染excel
initExcel(exportJson) {
      //工作表保护
       exportJson.sheets.forEach(t=>{
         t.config.authority = {
          sheet: 1, 
          hintText: "您试图更改的单元格或图表位于受保护的工作表中!", 
            allowRangeList: [
        	{ sqref: '$A$2:$D$6' },//设置A2~D6为可编辑区域，其它区域不可编辑 
           ],
         }
       });
      //初始化excel
      luckysheet.create({
        container: 'luckysheet', //dom id
        showtoolbar: false,   //隐藏工具栏
        sheetFormulaBar: false,  //隐藏公式栏
        enableAddRow: false,  //隐藏新增row
        showtoolbarConfig: {
          print: false // 隐藏插件内部打印按钮
        },
        sheetRightClickConfig: {  // 工作表右键：禁用 删除，复制...
          delete: false, 
          copy: false, 
          rename: false, 
          color: false, 
          hide: false, 
          move: false, 
        },
        cellRightClickConfig: { //单元格右键配置
          paste: false, // 粘贴
          insertRow: false, // 插入行
          insertColumn: false, // 插入列
          deleteRow: false, // 删除选中行
          deleteColumn: false, // 删除选中列
          deleteCell: false, // 删除单元格
          hideRow: false, // 隐藏选中行和显示选中行
          hideColumn: false, // 隐藏选中列和显示选中列
          clear: false, // 清除内容
          matrix: false, // 矩阵操作选区
          sort: false, // 排序选区
          filter: false, // 筛选选区
          chart: false, // 图表生成
          image: false, // 插入图片
          link: false, // 插入链接
          data: false, // 数据验证
          cellFormat: false // 设置单元格格式
        },
        showinfobar: false, // 显示头部返回标题栏
        data: exportJson.sheets, //excel数据
      });
 
    },

2，luckysheet 本地引入步骤：

（1）gitee上下载项目: https://www.wpsshop.cn/w/凡人多烦事01/article/detail/396030