前端实现pdf在线预览

最新推荐文章于 2024-07-03 14:20:46 发布

yangqii

最新推荐文章于 2024-07-03 14:20:46 发布

阅读量6.3k

点赞数 1

本文链接：https://blog.csdn.net/yangqii/article/details/118307530

版权

概述：pdf在线预览，包括PC端浏览器、IOS、Android，开发过程中遇到的问题及解决方案

【1】iframe 直接打开pdf文件（可用于PC端）

<iframe src="pdf文件地址" width="100%" height="100%" frameborder="0"></iframe>

存在问题：移动端会直接弹出pdf下载页面，不支持pdf在线预览

【2】<object> <embed>标签打开pdf文件（可用于PC端、IOS）

解决上一个方案的问题，移动端直接弹出pdf下载页面

<object data="pdf文件地址" type="application/pdf" width="100%" height="100%">
    <embed src="pdf文件地址" type="application/pdf" />
</object>

存在问题：Android机pdf预览不稳定，会打不开pdf文件，页面出现空白

【3】pdf.js插件实现pdf文件预览（可用于PC端、IOS、Android）

（1）下载pdf.js插件（官网：http://mozilla.github.io/pdf.js）

官网提供了两个版本的插件资源，右边插件可适用左边插件不兼容的浏览器（低版本浏览器、Android移动端浏览器）

（2）主要代码文件 viewer.html、viewer.js（按需求进行修改）

上图部分代码若不修改，pdf文件必须跟viewer.html文件放在同一个文件夹内，否则访问不到pdf文件；

若想访问远程pdf文件，

1.可以把这部分代码注释

2.HOSTED_VIEWER_ORIGINS 数组添加网页域名

（3）访问viewer.html页面带参数file=pdf文件地址，即可实现pdf在线预览

可以采用window.open()、a标签、iframe嵌套等页面访问方式，根据需求选择

例：

<iframe src="./pdf/web/viewer.html?file=pdf文件地址" width="100%" height="100%" frameborder="0"></iframe>

存在问题：不清楚对viewer.js文件代码进行修改是否会有隐藏问题，目前测试未发现

关注