Vue2问题：分享一个通用多文件类型预览库

前端功能问题系列文章，点击上方合集↑

序言

大家好，我是大澈！

本文约2000+字，整篇阅读大约需要3分钟。

本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。

如果您只需要解决问题，请阅读第一、二部分即可。

如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。

1. 需求分析

当我们在做文件预览功能时，往往会遇到一种糟糕的情况。

就是每预览一种类型的文件，就需要重新安装、配置、编写一个新的库来实现，很麻烦，也很繁琐。

于是，我寻找了一个可以通用的预览库，来处理这个问题。

vue-office，一个支持多种文件docx、excel、pdf预览的vue组件库，作者hit757。这个库不仅能支持vue2/3，也支持非Vue框架的预览使用。

先看一下线上演示效果，如果实现效果与项目使用不符，为节约朋友们时间，可自行选择是否向下阅读。演示地址：https://501351981.github.io/vue-office/examples/dist/#/docx。

如果朋友们觉得能用，就继续往下面看看它的实现。当然，如果大家还有其他类似的通用库推荐，也欢迎留言补充，感谢学习指教。

2. 实现步骤

2.1 关于针对特定类型文件的预览库

如果不使用这种vue-office通用的多文件类型预览库，我们可能需要使用如下这些，关于针对特定类型文件的预览库，包括但不限于：

• 预览PDF：

pdf.js：是由 Mozilla 开发的用于在浏览器中渲染PDF文件的JavaScript库。你可以使用它在Vue项目中嵌入PDF预览功能。

Vue-PDF：是一个用于在Vue项目中显示PDF文件的组件。它基于PDF.js构建，提供了简单易用的API。

• 预览Excel：

SheetJS：是一个强大的用于处理Excel文件的JavaScript库。你可以使用它在Vue项目中读取Excel文件并显示内容。

• 预览Word：

Mammoth.js：是一个用于将.docx文件转换为HTML的JavaScript库。你可以使用它在Vue项目中将Word文档转换为HTML并显示。

• 预览图片：

el-image组件：预览图片的需求，用它我觉得一般就足够了。

Viewer.js：是一个强大的用于在浏览器中查看图片的JavaScript库。你可以使用它在Vue项目中实现图片预览功能。

Vue Image Viewer：是一个用于在Vue项目中实现图片查看器功能的组件。它支持缩放、旋转等功能。

2.2 vue-office预览word文件使用

安装依赖：

#docx文档预览组件
npm install @vue-office/docx vue-demi@0.13.11

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。

npm install @vue/composition-api/

使用文件的网络地址预览代码：

<template>
  <vue-office-docx 
      :src="docx"
      style="height: 100vh;"
      @rendered="rendered"
  />
</template>
 
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
 
export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

使用上传文件预览代码（读取文件的ArrayBuffer）：

<template>
  <div>
    <input type="file" @change="changeHandle"/>
    <vue-office-docx :src="src"/>
  </div>
</template>
 
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
 
export default {
  components: {
    VueOfficeDocx
  },
  data(){
    return {
      src: ''
    }
  },
  methods:{
    changeHandle(event){
      let file = event.target.files[0]
      let fileReader = new FileReader()
      fileReader.readAsArrayBuffer(file)
      fileReader.onload =  () => {
        this.src = fileReader.result
      }
    }
  }
}
</script>

使用接口返回的二进制文件预览代码：

如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。

<template>
  <vue-office-docx 
      :src="docx"
      style="height: 100vh;"
      @rendered="rendered"
  />
</template>
 
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
 
export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: '' 
    }
  }, 
  mounted(){
    fetch('你的API文件地址', {
        method: 'post'
    }).then(res=>{
        //读取文件的arrayBuffer
        res.arrayBuffer().then(res=>{
            this.docx = res
        })
    })
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

2.3 vue-office预览excel文件使用

安装依赖：

#excel文档预览组件
npm install @vue-office/excel vue-demi@0.13.11

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。

npm install @vue/composition-api/

使用文件的网络地址预览代码、使用上传文件预览代码、使用接口返回的二进制文件预览代码，基本都和word文件预览使用相同，只不过需要修改逻辑中对样式和组件对象的引用：

//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

2.4 vue-office预览pdf文件使用

安装依赖：

#pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.13.11

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。

npm install @vue/composition-api/

使用文件的网络地址预览代码、使用上传文件预览代码、使用接口返回的二进制文件预览代码，基本都和word文件预览使用相同，只不过需要修改逻辑中对样式和组件对象的引用：

//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

3. 问题详解

3.1 关于vue-office文档地址

为了朋友们阅读到此处时，方便查阅官方文档学习。

最后附上，vue-office官方文档地址：https://github.com/501351981/vue-office。

关于非Vue框架的使用，也请移步参考官方文档。

结语

建立这个平台的初衷：

• 打造一个仅包含前端问题的问答平台，让大家高效搜索处理同样问题。

• 通过不断积累问题，一起练习逻辑思维，并顺便学习相关的知识点。

• 遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。

感谢关注微信公众号：“程序员大澈”，然后加入问答群，让我们一起解决实现所有BUG！