vue项目实现前端预览word和pdf格式文件

最近做vue项目遇到一个需求，就是前端实现上传word或pdf文件后，后端返回文件对应的文件流，前端需要在页面上展示出来。word预览简单一些，pdf预览我试过pdfjs,vue-pdf总是报各种奇奇怪怪的bug,但最终总算解决了问题，先看一下页面最终呈现效果吧：

页面上传pdf文件效果如下：

页面预览pdf文件效果如下：

页面上传word文件效果如下：

页面预览word文件效果如下：

这里先从上传组件页面说起，上传页面组件完整代码如下，按钮里面v-show=“$checkPermission([‘Register_tuotpUpload’])“都是给这个按钮设置了按钮权限的，我们只需要关注上传那一部分的代码即可，我们用了el-upload组件实现的手动上传，由于需求要求只能上传word和pdf