Vue 프로젝트 미리보기 엑셀 양식(파일 뷰어 플러그인)

파일 뷰어 플러그인의 github 주소는 다음과 같습니다.

내가 가리킨다

장면

file-viewer를 직접 사용하지는 않았지만, 온라인에서 찾아본 방법에 따르면 file-viewer의 xlsx 미리보기 기능만 사용했고 ppt, pdf, 그림 미리보기 등의 기능도 있습니다.

1단계: 관련 종속성 설치(exceljs,)

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

2단계: 새 xlsxView 폴더를 만들고 파일 뷰어에 관련 미리 보기 xlsx 코드를 폴더에 넣습니다.

3단계: 새 창을 열고 미리보기 구성요소에 논리를 도입하고 작성합니다.

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: '文件地址无效，请刷新后重试'
      })
    }
    // 加载文件内容
    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)
      )
    }
}

요약하다

또한 럭키시트와 럭키엑셀을 사용하여 미리보기 엑셀을 달성하는 방법이 있습니다. 링크는 다음과 같습니다.
Vue 프로젝트는 luckyexcel을 사용하여 Excel 양식을 미리 봅니다.