本文共 544 字，大约阅读时间需要 1 分钟。

浏览器中直接打开预览 pdf 文件

安装

解压下载的zip文件，将解压后的整个目录（pdf-dist）拷贝到项目的 public 目录下（放在 public 目录下的文件不会被 webpack 处理）

使用 pdf.js 自带的预览界面 viewer.html 预览，可以在 viewer.css 文件对 viewer.html 做一些样式调整。

在需要使用的地方直接一个 a 标签 href 链接即可，a 标签的 href 链接形式为：/pdf-dist/web/viewer.html?file=pdf文件地址

  预览文件

在浏览器中打开文件后如果报错 file origin does not match viewer's ，只需要在 viewer.js 文件中找到 throw new Error('file origin does not match viewer\'s'); 这一行，并注释掉即可

通过 vue 路由组件实现预览

在项目 views 文件夹下新建一个组件用于 pdf 文件预览，比如我这里的 views/pdf-preview/index.vue

index.vue 文件内容如下，主要是通过 iframe 实现

转载地址：https://jackiehao.blog.csdn.net/article/details/109453645 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！