vue项目使用luckyexcel插件预览excel表格-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目使用luckyexcel插件预览excel表格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

温馨提示：需要用到luckysheet文件和luckyexcel插件，根据下面步骤一步一步操作会避免踩坑，比如我当时遇到了window.luckysheet is not defined控制台报红的问题。

第一步引入luckysheet的相关依赖（本地文件或者在线cdn引入）

（这也是上面提到的如果没有引入会报红window.luckysheet找不到的问题）
public文件夹下的index.html里引入luckysheet的相关依赖，由于考虑到我所做的这个项目可能会内网部署，所以将这些依赖包放在了public文件夹下的static文件夹里新建了一个luckysheet文件夹，这些依赖包的来源是我先npm install luckysheet --save把包拉下来，然后去拷贝的。文件存放位置和引入代码如下图。当然也可以选择cdn引入的方式。文章来源地址https://www.toymoban.com/news/detail-520411.html

<!-- 这是引入本地文件 -->
<link rel='stylesheet' href='static/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='static/plugins/plugins.css' />
<link rel='stylesheet' href='static/css/luckysheet.css' />
<link rel='stylesheet' href='static/assets/iconfont/iconfont.css' />
<script src="static/plugins/js/plugin.js"></script>
<script src="static/luckysheet.umd.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

第三步：luckyexcel处理并渲染表格

html部分
这里需要注意id要写上，后面渲染要用到，还有重要的一点是style的样式要写，一开始没有写发现文件已经读取成功，但是页面上没有显示出来。

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

js部分

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: {
	// 加载文件内容
  initExcel(type) {
	axios({
        method: 'post',
        url: process.env.VUE_APP_BASEURL + apiUrl, //这是接口地址
        data: data,
        responseType: 'blob'
      }).then(response => {
        // 如果是导出/下载 则触发downLoadXls方法
        if (type == 'export') {
          downLoadXls(response)
        } else {
          // 否则是预览，则触发displayResult方法
          that.displayResult(response.data)
        }
        function downLoadXls (response) {
          const content = response.data
          const blob = new Blob([content])
          const fileName = excelName + '.xlsx' //这是设置表格的文件名
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        }
      })
    },
    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){
              // 如果抛出任何错误，则处理错误
          }
      )
    }
}