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

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

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

vue项目实现前端预览word和pdf格式文件_第1张图片

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

vue项目实现前端预览word和pdf格式文件_第2张图片

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

vue项目实现前端预览word和pdf格式文件_第3张图片

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

vue项目实现前端预览word和pdf格式文件_第4张图片
这里先从上传组件页面说起,上传页面组件完整代码如下,按钮里面v-show=“$checkPermission([‘Register_tuotpUpload’])“都是给这个按钮设置了按钮权限的,我们只需要关注上传那一部分的代码即可,我们用了el-upload组件实现的手动上传,由于需求要求只能上传word和pdf

你可能感兴趣的:(vue2,前端,vue.js,word)