浏览器预览PDF

浏览器预览PDF有以下几种方式：

浏览器直接预览
iframe 内嵌预览
插件

预览方式

浏览器直接预览

这种方式需要浏览器调整相应的配置才能实现直接预览，部分情况下浏览器遇到PDF文件是触发下载的，取决与客户机设置

iframe 内嵌预览

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF 预览</title>
</head>

<body style="padding: 0; margin: 0;">
    <iframe src="/demo.pdf" style="width: 100%; height: 100vh"></iframe>
</body>

</html>

同样需要打开浏览器PDF预览功能, 否则还是提示下载：

插件预览

如果使用插件，这里推荐使用 mozilla 的 pdf.js 插件, 免费且兼容性好。

pdf.js插件

打开官网，根据需要下载对应的版本文件: https://mozilla.github.io/pdf.js/

启动简单的http服务

下载并解压文件，进入文件目录后启动一个 http server

cd /Users/lrq/Downloads/pdfjs-2.9.359-dist
# npm install http-server -g # 简单的 http server
http-server -p 8000 --cors

viewer.html

viewer.html 是全页面的 PDF 阅读器

服务启动后访问 http://localhost:8000/web/viewer.html

通过 viewer.html 可以看到PDF文件可以正确预览，同时还具有多语言支持和移动的端的适配，非常不错！

替换本地(默认)文件

复制 demo.pdf（自己的文件）到 web目录 下
打开预览页面，点击顶部工具栏右侧的折叠按钮 »
在折叠菜单内选择 文档属性
复制文件名（compressed.tracemonkey-pldi-09.pdf）
从根目录内全局文字搜索文件名
将所有的 compressed.tracemonkey-pldi-09.pdf 改为 demo.pdf

这里也将默认的PDF文件改为了 demo.pdf

动态本地文件

viewer.html 接受一个 file 参数, 这个参数可以是 web目录 下的任何pdf文件

例如文件在: /pdfjs-2.9.359-dist/web/demo.pdf

访问地址： http://localhost:8000/web/viewer.html?file=demo.pdf

动态URL文件

模拟服务2

如果已经存在服务2则忽略这个步骤，需要注意同源策略限制

cd /Users/lrq/Downloads/pdfjs-2.9.359-dist/web
# npm install http-server -g # 简单的 http server
http-server -p 8001 --cors # 支持跨域响应

此时访问服务2 http://localhost:8001/demo.pdf 可以访问。

拼接URL参数

拼接地址为： http://localhost:8000/web/viewer.html?file=http://localhost:8001/demo.pdf

此时可能会发现发生错误:

PDF.js v2.9.359
file origin does not match viewer's

解决办法：根目录全局搜索 file origin does not match viewer’s 或直接修改 viewer.js，并关闭文件检测逻辑.

// viewer.js 注释这三行
// if (origin !== viewerOrigin && protocol !== "blob:") {
//   throw new Error("file origin does not match viewer's");
// }

注意

同源策略限制: Access-Control-Allow-Origin
HOSTED_VIEWER_ORIGINS: 白名单策略，修改 viewer.js 内的此变量来修改信任的域，或者注释检测逻辑也可以。

文件获取失败(Failed to fetch)

先确认文件是否可以正常访问: http://localhost:8001/demo.pdf
确认文件地址是否支持跨域访问
确认是否是 HTTPS协议 证书缺失导致获取失败

pdf.js | 浏览器预览｜ viewer.html