这里写自定义目录标题
pdfjs__3">1. pdf.js 库的使用
pdfjs_5">1.1. 什么是 pdf.js
pdf.js 是一款 Nozilla 开发的、用于网页上显示 pdf 文档的 Javascript 库, 提供 pdf 文件的在线阅读。
pdf.js 在支持 js 的服务器上就能运行, 所以各种网站上的 Pages 服务均支持, 无须 php、java 等动态语言环境的支持。
pdf__pdfjs_11">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 编译生成的, 此类文件较大, 我们一般用不到, 所以可以删除。
pdf__21">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)]
pdf__0_63">1.3.2. 问题: 获取 pdf 时服务器返回 0
原因: 这种情况往往出现在 pdf 使用了跨域的 URL, 对方服务器禁用了跨域访问。
解决方案: 放置 pdf 文件的服务器把引用的 URL 加入白名单即可。
