vue項目預(yù)覽excel表格功能(file-viewer插件)

更新時間：2023年10月19日 12:04:15 作者：悅悅豬

這篇文章主要介紹了vue項目預(yù)覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

file-viewer的插件github地址如下

點我

場景

我沒有直接使用file-viewer，是按照網(wǎng)上搜來的方法，只使用了file-viewer的預(yù)覽xlsx的功能，它里面還有預(yù)覽ppt,pdf,圖片等功能。

第一步：安裝相關(guān)依賴包（exceljs,）

npm install exceljs --save
npm install '@handsontable/vue' --save
npm install handsontable --save
npm install 'handsontable/i18n' --save //這個依賴我沒有下成功，不過也能正常運行

第二步：新建一個xlsxView的文件夾，將file-viewer里相關(guān)預(yù)覽xlsx的代碼放進去。

第三步：新窗口打開，在預(yù)覽組件里引入并寫邏輯 html部分

<template>
  <div>
    <div v-if="fileType === 'xlsx'" ref="output" />
    <div v-if="fileType === 'pptx'" ref="pptRef"></div>
  </div>
</template>

js部分

import renderSheet from '../xlsxView'; // 引入
// 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: '文件地址無效，請刷新后重試'
      })
    }
    // 加載文件內(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) {
 	  // 生成新的dom
      const node = document.createElement('div')
      // 添加孩子，防止vue實例替換dom元素
      if (this.last) {
        this.$refs.output.removeChild(this.last.$el)
        this.last.$destroy()
      }
      const child = this.$refs.output.appendChild(node)
      // 調(diào)用渲染方法進行渲染
      return new Promise((resolve, reject) =>
        renderSheet(buffer, child).then(resolve).catch(reject)
      )
    }
}