Vue.js - 实现前端excel表格预览功能（Luckysheet+Luckyexcel）

    最近项目需要实现一个 excel 表格在线预览功能，即前端通过后台提供的 xlsx 文件路径，自动加载并显示表格内容在页面上。要实现该需求，我们可以借助 Luckysheet 和 LuckyExcel 这两个开源库来实现，下面通过样例进行演示。

1，安装配置 Luckysheet

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

（3）接着写个简单样例测试下，在页面上添加一个 div 用于表格显示区域，然后初始化 Luckysheet 创建表格：

<template>
  <div class="hello">
    <div id="mysheet" style="margin:0px;padding:0px;width:50%;height:500px;"></div>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
  },
  mounted() {
      // 创建表格
      window.luckysheet.create({
          container: 'mysheet' // 设定DOM容器的id
      });
  },
  methods: {
  }  
}
</script>

2，安装配置 Luckyexcel

（2）首先进入项目文件夹，执行如下命令安装 luckyexcel：

npm install luckyexcel

（3）接着修改上面的样例代码，读取并转换一个 xlsx 文件数据，然后提供给 Luckysheet 进行展示：

<template>
  <div class="hello">
    <div id="mysheet" style="margin:0px;padding:0px;width:100%;height:500px;"></div>
  </div>
</template>
<script>

import LuckyExcel from 'luckyexcel'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
  },
  mounted() {
      // 加载 excel 文件
      LuckyExcel.transformExcelToLuckyByUrl("2021.xlsx", "", (exportJson, luckysheetfile) => {
          console.log(exportJson);
          console.log(luckysheetfile);
          if(exportJson.sheets==null || exportJson.sheets.length==0){
              alert("文件读取失败!");
              return;
          }
          // 销毁原来的表格
          window.luckysheet.destroy();
          // 重新创建新表格
          window.luckysheet.create({
              container: 'mysheet', // 设定DOM容器的id
              showtoolbar: false, // 是否显示工具栏
              showinfobar: false, // 是否显示顶部信息栏
              showstatisticBar: false, // 是否显示底部计数栏
              sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
              allowEdit: false, // 是否允许前台编辑
              enableAddRow: false, // 是否允许增加行
              enableAddCol: false, // 是否允许增加列
              sheetFormulaBar: false, // 是否显示公式栏
              enableAddBackTop: false,//返回头部按钮
              data:exportJson.sheets, //表格内容
              title:exportJson.info.name  //表格标题
          });
      });
  },
  methods: {
  }  
}
</script>

（4）效果图如下：