pdf.js 库的使用
1. pdf.js 库的使用
1.1. 什么是 pdf.js
pdf.js 是一款 Mozilla 开发的、用于网页上显示 pdf 文档的 Javascript 库, 提供 pdf 文件的在线阅读。
pdf.js 在支持 js 的服务器上就能运行, 所以各种网站上的 Pages 服务均支持, 无须 php、java 等动态语言环境的支持。
1.2. 在网页上显示 pdf 文件(使用 pdf.js)
1.2.1. 下载
网址: http://mozilla.github.io/pdf.js/getting_started/。
下载 Pre-built 就可以了, 无需下载其源码, Pre-built 里选择 Stable 版本, 不要下 Beta 版, 编程这么多年了, 要相信 Bug 的力量- -!。
解压后, 里面的 .map 文件是用于浏览器调试 js 时用到的调试文件, 是在生成时用 node.js 编译生成的, 此类文件较大, 我们一般用不到, 所以可以删除。
1.2.2. 网页上显示 pdf 文件
有两种显示 pdf 文件的方式, 一种是传入 pdf 文件的路径参数, 可以为 URL, 但是采用这种方式会在网址栏看到 pdf 的 URL 地址。另外一种方法是直接修改默认文件。
1.2.2.1. 传入参数(不推荐)
在地址栏后面传 ?file=test.pdf 即可完成对默认路径的修改:
http://localhost:8080/pdfjs/web/viewer.html?file=test.pdf //这种最好不要传输中文, 具体我没用试过
这里的 test.pdf 取与 viewer.html 的相对路径即可(整个服务器的绝对路径也行, 跨域的 URL 也可)。
1.2.2.2. 修改默认文件
index.html
<!DOCTYPE html>
<html>
<head>
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="0;url=web/viewer.html">
</head>
</html>
修改文件 web/viewer.js 里面的 DEFAULT_URL 的值, 可以是相对路径, 也可以是跨域的 URL(当然这个由于安全原因默认没打开, 想要打开看下面的问题):
var DEFAULT_URL = 'https://xxx.pdf'
1.3. 遇到的问题
1.3.1. 问题: file origin does not match viewer
原因: 由于安全性, 默认是阻止了 pdf 文件跨域的
解决方案: 修改 viewer.js, 将里面的代码注释就可以了:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ra9wlXpm-1670572727477)(http://p7ldffsa9.bkt.clouddn.com/Web-javascript-pdfjs-validatefileurl.png)]
1.3.2. 问题: 获取 pdf 时服务器返回 0
原因: 这种情况往往出现在 pdf 使用了跨域的 URL, 对方服务器禁用了跨域访问。
解决方案: 放置 pdf 文件的服务器把引用的 URL 加入白名单即可。