1. 需求分析

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

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

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

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

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

如果朋友们觉得能用，就继续往下面看看它的实现。

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）vue-office预览word文件使用

安装依赖：

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