vue项目使用luckyexcel预览excel表格功能(心路历程)

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

npm install luckyexcel --save

<template>
  <div>
    <div v-if="fileType === 'xlsx'" id="luckysheet" style="margin:0px;padding:0px;width:100%;height:100vh;" />
  </div>
</template>

import LuckyExcel from 'luckyexcel'; // 引入
// mounted生命周期
mounted() {
	// 从路由地址中获取fileUrl,fileType
    this.fileUrl = this.$route.query.fileUrl ? this.$route.query.fileUrl : null
    this.fileType = this.$route.query.fileType ? this.$route.query.fileType : null
    if (this.fileUrl == null) {
      this.$message({
        type: 'error',
        message: '文件地址无效，请刷新后重试'
      })
    }
	// 加载文件内容
    this.uploading(this.fileUrl)
}
// methods方法
methods: {
	// 加载文件内容
    uploading(file) {
    	// downloadFileXLS是接口，fileKey传的是文件地址，调接口获取文件流
        downloadFileXLS({fileKey: file}).then(res => {
          if(this.fileType === 'xlsx') {
          	// 预览xlsx
            this.displayResult(res)
          } else if(this.fileType === 'pptx') {
          	// 预览pptx，可忽略，该篇文章不涉及pptx的预览
            this.previewPptx(res)
          }
        })
    },
    displayResult(buffer) {
      // 得到xlsx文件流后
      LuckyExcel.transformExcelToLucky(
          buffer, 
          function(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: 'luckysheet', // 设定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 //表格标题
              });
          },
          function(error){
              // 如果抛出任何错误，则处理错误
          }
      )
    }
}

// 获取目标路由地址
const routeUrl = this.$router.resolve({
   name: 'OfficeView',
   query: {
     fileUrl: item.fileKey,
     fileType: item.type
   }
 })
 // 打开新标签页
 window.open(routeUrl.href, '_blank')