Formulario de Excel de vista previa del proyecto Vue (complemento de visor de archivos)

La dirección de github del complemento del visor de archivos es la siguiente

Señalo

Escenas

No usé el visor de archivos directamente, pero según el método que busqué en línea, solo usé la función del visor de archivos para obtener una vista previa de xlsx, y también tiene funciones como la vista previa de ppt, pdf e imágenes.

Paso 1: Instalar dependencias relacionadas (exceljs,)

npm install exceljs --save
npm install '@handsontable/vue' --save
npm install handsontable --save
npm install 'handsontable/i18n' --save //这个依赖我没有下成功，不过也能正常运行

Paso 2: cree una nueva carpeta xlsxView y coloque el código xlsx de vista previa relevante en el visor de archivos.

Paso 3: Abra una nueva ventana, introduzca y escriba la lógica en el componente de vista previa

parte html

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

js parte

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: '文件地址无效，请刷新后重试'
      })
    }
    // 加载文件内容
    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) {
    
    
 	  // 生成新的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)
      // 调用渲染方法进行渲染
      return new Promise((resolve, reject) =>
        renderSheet(buffer, child).then(resolve).catch(reject)
      )
    }
}

Resumir

También hay una forma de usar Luckysheet y LuckyExcel para obtener una vista previa de Excel, el enlace es el siguiente.
El proyecto Vue usa luckyexcel para obtener una vista previa del formulario de Excel