PDF预览

调研了一些pdf预览插件，最终选定使用pdfjs包，直接下载包放到项目的public目录下mozilla.github.io/pdf.js/gett…

之所以选定pdfjs是因为我们可以通过简单的修改其源码以满足我们的业务需求，除了预览还实现了几个功能点

1. 主题随着项目做更新
2. 高亮显示文档中的知识点
3. 在文档加载完之前需要有loading状态

用法

<iframe :src="pdfUrl" width="100%" height="100%"></iframe>

const fileUrl = `${process.env.BASE_URL}pdf/web/viewer.html`
this.pdfUrl = `${fileUrl}?file=${encodeURIComponent(this.url)}`

DOC，DOCX预览

这个简单一些直接使用docx-preview

import { renderAsync } from 'docx-preview'
renderDocx () {
  fetch(this.url)
    .then(response => response.blob())
    .then(blob => {
      this.loading = false
      renderAsync(blob, this.$refs.doc)
    })
    .catch(error => {
      console.error(error)
    })
}

XLSX，CSV预览

这个比较简单了，直接是后端解析返回行列数据，前端通过表格渲染就行了。