vue项目中在线预览pdf
1.在这里我用到了pdf.js插件来实现在线预览pdf的效果(pdf.js下载地址”http://mozilla.github.io/pdf.js/“)
2.下载好pdf.js插件以后我们将插接放在vue根目录静态资源文件夹下(vue3.0以前为static、vue3.0以后为public)
3.放好之后我们就开始使用了,其实这个使用起来很简单的,这里我用的是iframe标签来嵌套的,我们在iframe标签的src路径为pdf.js下的web文件夹下面的viewer.html,然后我们在后面跟一个参数file 这是我们pdf文件的路径。如"pdfjs/web/viewer.html?file=aaa/pdf.pdf
"
<iframe
:src="`pdfjs/web/viewer.html?file=${pdf}`"
width="100%"
:height="height2"
class="iframe"
></iframe>
4.这里我们就可以运行了,但是我们发现这里会因为pdf.js不支持跨域而报 “file origin does not match viewer” 的错误。这里我们的解决办法就比较简单了,我们打开web文件夹下面的viewer.js文件搜索 “file origin does not match viewer” 找到那句话注释掉就好了(大概在1900行左右)
if (origin !== viewerOrigin && protocol !== 'blob:') {
// throw new Error('file origin does not match viewer\'s');
}