本文详细介绍如何使用 pdf.js 在前端展示 PDF 文件，涵盖 PC、Android 及 iOS 多端适配方案。重点解析如何解决新版 pdf.js 的跨域拦截问题，并提供针对 Mac OS Safari 浏览器的兼容性解决方案，包括老版本切换与动态加载策略，确保 PDF 预览功能在不同环境下稳定运行。
简易实现方案
- 若仅在电脑端使用，可借助
iframe标签进行内嵌预览 - iOS移动端可通过
a标签包裹链接实现点击跳转预览（此方法在安卓端无效）
适用于安卓、电脑及iOS的通用解决方案
参考资料
早期版本GitHub仓库地址
包含所有历史版本的资源地址
识别当前访问客户端类型
judgeClient() {
let client = ''
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
client = 'iOS'
} else if (/(Android)/i.test(navigator.userAgent)) { // 判断Android
client = 'Android'
} else {
client = 'PC'
}
return client
}
具体实施步骤
下载并配置pdf.js插件
访问官方资源地址下载插件包 http://mozilla.github.io/pdf.js/
该链接提供最新版本，但可能不兼容旧版浏览器及苹果系统。若需在苹果设备上展示，请使用前述老版本系统，或下载右侧列出的旧版浏览器版本（没有尝试过）
集成至项目
在public目录下创建pdfjs文件夹，并将解压后的文件放入其中
解压后的文件结构
部署至项目目录
代码应用示例
方案一（适用于文件链接或静态资源）
处理跨域访问限制
首先解决pdfjs内置的跨域拦截机制： 针对新版本 定位至/web/viewer.js，搜索 fileOrigin，并注释相关代码段
针对老版本 定位至/web/viewer.js，搜索 if (origin !== viewerOrigin && protocol !== “blob:”) {，并注释相关代码段
直接利用iframe嵌入即可实现
file后携带需要展示的pdf链接
<iframe src="pdfjs/web/viewer.html?file=http://xxxx/file/xxxx.pdf" width="500" height="500"></iframe>注意事项： 需展示的pdf文件必须与psf.js文件处于相同的域名或IP地址下
方案二
1、首先创建一个iframe标签，并指定唯一的id属性
2、从后端接口获取blob格式的pdf文件，具体交互方式需与后端协商（大致思路：后端提供一个接口，接收前端传递的文件链接参数，返回该链接对应的blob格式文件流。）
3、获取到blob格式的pdf文件后，将其注入到iframe中，即可完成展示
解决mac OS系统下safari浏览器兼容性问题
策略一
直接采用老版本，经测试老版本对本项目无负面影响
策略二（引入老版本pdfjs，此方法可能导致概率性出现pdf按钮不显示的问题）
同时引入老版本和新版本的pdfjs，在请求页面时判断当前客户端类型，若为ios则加载老版本的pdf.js文件
基础代码示例
client变量为文章开头所述方法获取的客户端类型标识
<iframe
v-if="item.url && item.url.split('.').pop().toLowerCase() === 'pdf' && client !== 'iOS'"
:src="'pdfjs/new/web/viewer.html?file=' + item.url"
allow="fullscreen"
align="center"
name="ifd"
width="100%"
scrolling="no"
frameborder="0"
type="application/pdf"
height="700"/>
<iframe
v-else-if="item.url && item.url.split('.').pop().toLowerCase() === 'pdf' && client === 'iOS'"
:src="'pdfjs/old/web/viewer.html?file=' + item.url"
allow="fullscreen"
align="center"
name="ifd"
width="100%"
scrolling="no"
frameborder="0"
type="application/pdf"
height="700"/>
参考链接
https://www.cnblogs.com/huihuihero/p/16892882.html
至此，关于使用pdf.js展示pdf文件(亲测可用)的介绍完毕，更多相关pdf.js展示pdf文件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！