今天小编给大家分享一下vue项目怎么实现前端预览word与pdf格式文件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

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

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

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

这里先从上传组件页面说起，上传页面组件完整代码如下，按钮里面v-show=“$checkPermission([‘Register_tuotpUpload’])“都是给这个按钮设置了按钮权限的，我们只需要关注上传那一部分的代码即可，我们用了el-upload组件实现的手动上传，由于需求要求只能上传word和pdf，所以能看到属性设置的有 accept=”.pdf, .doc, .docx”，然后不展示上传成功的文件的列表设置的属性有:show-file-list=“false”，而handleExceed回调函数和limit都是为了限制只能上传一个文件，上传前的回调钩子函数beforeAvatarUpload里进行了文件类型判断与提醒，手动上传是通过UploadFile里进行完成的，需要注意的是由于docx-preview这个插件只能预览后缀为docx的word文件，如果是doc后缀格式的word文件一定要让后端强制将上传doc格式的文件改为docx格式，目前对于doc格式的word文件实现网页在线预览我只想到了docx-preview这个插件和这个解决办法：