pdf.js 库的使用

云满笔记

已于 2023-04-26 11:17:24 修改

阅读量9.7k

点赞数

分类专栏： node 文章标签： pdf web js front http

于 2022-12-07 12:00:05 首次发布

本文链接：https://blog.csdn.net/wan212000/article/details/128217983

版权

25 篇文章 2 订阅

订阅专栏

1. pdf.js 库的使用

pdf.js 是一款 Mozilla 开发的、用于网页上显示 pdf 文档的 Javascript 库, 提供 pdf 文件的在线阅读。

pdf.js 在支持 js 的服务器上就能运行, 所以各种网站上的 Pages 服务均支持, 无须 php、java 等动态语言环境的支持。

网址: http://mozilla.github.io/pdf.js/getting_started/。

下载 Pre-built 就可以了, 无需下载其源码, Pre-built 里选择 Stable 版本, 不要下 Beta 版, 编程这么多年了, 要相信 Bug 的力量- -!。

解压后, 里面的 .map 文件是用于浏览器调试 js 时用到的调试文件, 是在生成时用 node.js 编译生成的, 此类文件较大, 我们一般用不到, 所以可以删除。

有两种显示 pdf 文件的方式, 一种是传入 pdf 文件的路径参数, 可以为 URL, 但是采用这种方式会在网址栏看到 pdf 的 URL 地址。另外一种方法是直接修改默认文件。

在地址栏后面传 ?file=test.pdf 即可完成对默认路径的修改:

http://localhost:8080/pdfjs/web/viewer.html?file=test.pdf //这种最好不要传输中文, 具体我没用试过

这里的 test.pdf 取与 viewer.html 的相对路径即可(整个服务器的绝对路径也行, 跨域的 URL 也可)。

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'

原因: 由于安全性, 默认是阻止了 pdf 文件跨域的

解决方案: 修改 viewer.js, 将里面的代码注释就可以了:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ra9wlXpm-1670572727477)(http://p7ldffsa9.bkt.clouddn.com/Web-javascript-pdfjs-validatefileurl.png)]

原因: 这种情况往往出现在 pdf 使用了跨域的 URL, 对方服务器禁用了跨域访问。

解决方案: 放置 pdf 文件的服务器把引用的 URL 加入白名单即可。

关注