Luckysheet是什么？

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

Luckysheet 已不再维护，推荐使用 Univer 替代；虽然不在维护，但是不影响他功能以及特性的强大，还是可以正常使用；

本来我是想尝试用Univer，但是我的项目是一个引入vue2的H5项目，所以只能用Luckysheet 来实现；

如果想探索和了解更多点击官方中文文档或者gitHub仓库地址查询和学习；

代码实现xlsx文件预览

我项目里新建的一个xlsxPreview.html，实现，点击文件后，调转到该页面实现预览；

引入luckysheet的相关依赖

我这里在xlsxPreview.html中直接是CDN引入，你也可以安装后再build打包后把dist文件夹下的所有文件复制到项目目录，然后通过相对路径引入，这个官方文档有介绍，这里就不写了，我们直接用CDN引入，

 //我这里引入vue,是为了说明在下面H5中使用了vue的写法，
  <script src='../../js/vue.js'></script>
  //你只需要引入下面的即可
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
  <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

安装luckyexcel

npm install  luckyexcel --save

把node_modules中安装的luckyexcel 复制出来到H5目录下，在xlsxPreview.html通过script引入；

<script src="../../luckyexcel/dist/luckyexcel.umd.js"></script>

指定一个表格容器

 <div style="width: 100%;" id="xlsxPreview">
    <div id="luckysheet" style="margin:0px;padding:5px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;" ></div>
 </div>

实现逻辑

  mounted() {
    const fileId = getParam("fileId")
    this.getFile(fileId)
  },
  methods:{
     getFile(fileId){
        $.ajax({
            url:"/api-file/file/getFileByte",
            type: 'post',
            responseType:'blob',
            data: {
              fileId: fileId,
            },
            beforeSend: function (request) {
              request.setRequestHeader("Authorization", "Bearer " + JSON.parse(window.sessionStorage.getItem('store') || '{}').token);
            },
            success:(res) => {
            // 将Base64字符串转换为二进制字符串
              const path = res.data
              const raw = window.atob(path);
              const rawLength = raw.length;
              const uInt8Array = new Uint8Array(rawLength);
              for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
              }
              const xlsxBlob = new Blob([uInt8Array],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
              const file = new File([xlsxBlob], 'XXX.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
              var files = [];
              files.push(file);
              this.uploadExcel(files)
            },
            error:(err) => {
              alert('文件加载失败，请稍后重试！')
            }
        })
      },
      uploadExcel(files) {
        if (files == null || files.length == 0) return alert('没有文件等待导入');
        let name = files[0].name;
        let suffixArr = name.split('.'),
        suffix = suffixArr[suffixArr.length - 1];
        if (suffix != 'xlsx') return alert('目前只支持导入xlsx文件');
        LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');
          luckysheet.destroy();
          luckysheet.create({
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator,
            container: 'luckysheet', // 设定DOM容器的id
            showtoolbar: false, // 是否显示工具栏
            showinfobar: false, // 是否显示顶部信息栏
            showstatisticBar: false, // 是否显示底部计数栏
            showsheetbar:true,
            sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
            allowEdit: false, // 是否允许前台编辑
            enableAddRow: false, // 是否允许增加行
            enableAddCol: false, // 是否允许增加列
            sheetFormulaBar: false, // 是否显示公式栏
            enableAddBackTop: false, // 返回头部按钮
            showsheetbar: false, // 是否显示底部sheet页按钮
            enableAddRow: false,//允许添加行
            // 自定义配置底部sheet页按钮
            showsheetbarConfig: {
              add: false,
              menu: true,
            },
          });
        });
      },
  }