vue 在线预览PDF

一、如果是本地文件，则直接运行下面的代码就可以了

window.open(url,"_blank")
1

二、使用vue-pdf

vue 使用 vue-pdf 实现pdf在线预览

报错:MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)

Package not compatible with Vue cli version 5.x

三、使用pdfjs

pdfjs 官网地址

使用案列

可能报错：file origin does not match viewer’s。

直接注释掉web/viewer.js

if (origin !== viewerOrigin && protocol !== 'blob:') {
    throw new Error('file origin does not match viewer\'s');
}
1
2
3

四、使用iframe

<iframe :src="pdfSrc"  frameborder="0" width="100%" height="100%" ></iframe>
1

vue预览本地pdf文件方法之iframe

pdf文件，为什么有些能在浏览器直接打开，有些则打开是下载？

这个要看下载源支持在线预览吗，支持的话就能直接打开，不支持的话就只能先下载

跳转链接的时候遇到问题，由于是单页面，所有直接访问html会出现问题
解决办法：
1、pdfIframe.html 在nginx服务器上部署一个路径
2、项目中添加路由，指向PdfIframe.vue ,可能需要添加一个
3、vue 多页面入口配置
vue 多页面入口配置
4、直接在public 下创建 /pdfView.html 直接访问/pdfView.html