快捷導(dǎo)航

vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)

更新時(shí)間：2023年10月19日 12:08:13 作者：悅悅豬

這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下

場(chǎng)景

最近工作中在開發(fā)文檔上傳并能在新窗口打開預(yù)覽的功能。在此記錄下心路歷程。

方法

我總共嘗試了2種方法預(yù)覽excel，均可實(shí)現(xiàn)。還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn)，需要后端配合，叫做KKfileview。

1.使用luckyexcel插件實(shí)現(xiàn)xlsx的預(yù)覽

2.使用file-viewer插件實(shí)現(xiàn)xlsx的預(yù)覽

3.使用KKfileview插件實(shí)現(xiàn)xlsx的預(yù)覽

實(shí)現(xiàn)

方法一：使用luckyexcel插件

溫馨提示：需要用到luckysheet和luckyexcel，根據(jù)下面步驟一步一步操作會(huì)避免踩坑，比如我當(dāng)時(shí)遇到了window.luckysheet is not defined控制臺(tái)報(bào)紅的問題。

第一步：vue項(xiàng)目引入luckysheet的相關(guān)依賴（這也是上面提到的如果沒有引入會(huì)報(bào)紅window.luckysheet找不到的問題）

public文件夾下的index.html里引入luckysheet的相關(guān)依賴，由于考慮到我所做的這個(gè)項(xiàng)目可能會(huì)內(nèi)網(wǎng)部署，所以將這些依賴包放在了public文件夾下的static文件夾里新建了一個(gè)luckysheet文件夾，這些依賴包的來源是我先npm install luckysheet --save把包拉下來，然后去拷貝的。文件存放位置和引入代碼如下圖。當(dāng)然也可以選擇cdn引入的方式。

<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>

第二步：安裝luckyexcel

npm install luckyexcel --save

第三步：新窗口打開，所以新窗口的vue文件中引入luckyexcel并處理邏輯 html部分

這里需要注意id要寫上，后面渲染要用到，還有重要的一點(diǎn)是style的樣式要寫，一開始沒有寫發(fā)現(xiàn)文件已經(jīng)讀取成功，但是頁面上沒有顯示出來。

<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: '文件地址無效，請(qǐng)刷新后重試'
      })
    }
	// 加載文件內(nèi)容
    this.uploading(this.fileUrl)
}
// methods方法
methods: {
	// 加載文件內(nèi)容
    uploading(file) {
    	// downloadFileXLS是接口，fileKey傳的是文件地址，調(diào)接口獲取文件流
        downloadFileXLS({fileKey: file}).then(res => {
          if(this.fileType === 'xlsx') {
          	// 預(yù)覽xlsx
            this.displayResult(res)
          } else if(this.fileType === 'pptx') {
          	// 預(yù)覽pptx，可忽略，該篇文章不涉及pptx的預(yù)覽
            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();
              // 重新創(chuàng)建新表格
              window.luckysheet.create({
                container: 'luckysheet', // 設(shè)定DOM容器的id
                showtoolbar: false, // 是否顯示工具欄
                showinfobar: false, // 是否顯示頂部信息欄
                showstatisticBar: false, // 是否顯示底部計(jì)數(shù)欄
                sheetBottomConfig: false, // sheet頁下方的添加行按鈕和回到頂部按鈕配置
                allowEdit: false, // 是否允許前臺(tái)編輯
                enableAddRow: false, // 是否允許增加行
                enableAddCol: false, // 是否允許增加列
                sheetFormulaBar: false, // 是否顯示公式欄
                enableAddBackTop: false, //返回頭部按鈕
                data: exportJson.sheets, //表格內(nèi)容
                title: exportJson.info.name //表格標(biāo)題
              });
          },
          function(error){
              // 如果拋出任何錯(cuò)誤，則處理錯(cuò)誤
          }
      )
    }
}

新窗口打開預(yù)覽xlsx，我是使用的如下方法跳轉(zhuǎn)到要預(yù)覽的頁面的路由（第三步的代碼就是預(yù)覽頁面的），帶上了參數(shù)。

// 獲取目標(biāo)路由地址
const routeUrl = this.$router.resolve({
   name: 'OfficeView',
   query: {
     fileUrl: item.fileKey,
     fileType: item.type
   }
 })
 // 打開新標(biāo)簽頁
 window.open(routeUrl.href, '_blank')