在网页中加载并显示 PDF 文件是最常见的业务需求. 例如以下应用场景:(1) 在电商网站上购物之后, 下载电子发票之前先预览发票.(2) 电子政务管理系统中查看发布的公文, 公文文件一般是 PDF 格式的文件.
目前随着浏览器技术发展的不断成熟与强大, 大部分的浏览器都支持直接把 PDF 文件拖到浏览器中显示, 最方便的是这个操作不需要额外的插件支持. 但是不同的浏览器加载显示 PDF 的效果不同. 这时就需要专门的 JS 插件来处理. Mozilla 开源了一个插件 PDF.JS, 无需任何本地支持就可以在所有主流的浏览器上显示 PDF 文档, 使用起来十分的方便. 唯一的要求就是浏览器必须支持 html5.
一, PDF.JS 简介
官网地址: http://mozilla.github.io/pdf.js/ , 下载稳定版本, 目前最新稳定版为 v2.2.228
1, 下载至本地:
2, 解压缩, 里面包含 2 个目录
build 目录包含以下内容, 其中 PDF.JS 是核心文件
web 目录包含以下内容, 其中 viewer.HTML 是 PDF 查看器
3, 在 VS 中打开 viewer.HTML, 引用了查看其的样式文件 viewer.CSS,PDF.JS 核心文件, 查看器脚本文件 viewer.JS , 资源文件 local.properties.
4, 直接在浏览器中打开 viewer.HTML, 能正常的显示 PDF 查看器, 但是无法显示 PDF 文件.
必须将 pdfjs-2.2.228-dist 包, 部署在 IIS 上之后, 通过 http 方式访问才能正常的加载显示 PDF 格式文件的内容
5, 在 IIS 中部署之后, 通过 http://localhost:8033/pdfjs/Web/viewer.HTML 方式访问该查看器. 该查看器中默认加载的是 PDF.JS 的使用说明书内容.
二, 将 PDF.JS 集成到项目网页中
将解压缩的内容复制到项目中
有多种方式加载加载并查看 PDF 文件内容.
方式 1: 通过链接方式, 在 viewer.HTML 页面中独立独立查看
实现方法: 通过 < a/> 标签链接到 viewer.HTML 页面, 需要传递一个重要的参数 [file] , 设置为要显示的 PDF 文件的路径
<a href="Content/pdfjs-2.2.228/web/viewer.html?file=http://localhost:8033/PDFTest/Pdf / 项目的 5 个管理过程组和项目管理知识领域映射关系. pdf">
点击查看 PDF 内容 </a>
点击 a 链接, 打开独立的窗口
方式 2: 嵌入在网页中
某些场景下需要将 PDF 查看器集成在业务网页中, 便于业务流程的操作
实现方法: 通过 iframe 实现. 任然需要传递 file 参数, 设置 PDF 文件的路径
- <div id="divPdfViewPanel2" style="margin: 5px;">
- <iframe src="Content/pdfjs-2.2.228/web/viewer.html?file=http://localhost:8033/PDFTest/Pdf / 项目的 5 个管理过程组和项目管理知识领域映射关系. pdf" width="100%" height="400px;"></iframe>
- </div>
但是该方法把 PDF 文件写死了. 正常情况下都是通过程序动态的设置 PDF 文件, 这时就需要使用 Ajax 动态的读取数据库或者从其他地方传递过来并设置该 file 参数.
该方式经测试, 加载 100M 左右的 PDF 文件, 速度非常快.
三, 加载指定的 PDF 文件
网络上还有其他的方法, 通过读取 PDF 文件流来实现. 如果有业务需求, 大家可以尝试.
四, 跨域设置
在第二大部分中介绍的 2 种方法, 通过 HTTP 方式实现, 这里涉及到跨域问题. 如果 PDF 文件与网站部署在一起, 则不存在跨域. 如果 PDF 在网站之外, 则涉及到跨域问题. 打开 viewer.JS 文件, 注释掉以下内容.
还有其他方式也可以实现跨域, 网络上有很多优秀的解决方案. 但是上述的方法最简单直接.
五, 汉化
viewer.HTML 查看器的菜单功能按钮的显示都是英文的
在 pdfjs-2.2.228\Web\local 目录下列出了很多种语言的资源包, 找到 zh-CN. 里面包含了对应的汉化信息.
打开 viewer.HTML, 修改其中所有菜单的 title 与 span 的内容
全部修改完成后, 保存, 再次在浏览器中查看, 菜单已经显示为中文了.
来源: https://www.cnblogs.com/SavionZhang/p/11757849.html