pdf.js 移动端展示预览打开 pdf-pdfh5.js

pdfh5.js v1.2.22

pdfh5.js 基于 pdf.js 和 jQuery，web/h5/移动端 PDF 预览手势缩放插件。支持 canvas 和 svg 两种渲染模式，支持 ajax 和 fetch 两种请求方式。支持懒加载。

前端学习交流 QQ 群，651601340，可以进来提 pdfh5.js 的 bug、问题、建议等。

pdfh5 博客主页

pdfh5 项目 GitHub 地址

pdfh5 打包下载

2019.11.27 更新： 1. 新增配置项属性 limit，限制 pdf 加载最大页数。

pdfh5 在线预览（建议使用谷歌浏览器 F12 手机模式打开预览）

https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/default.pdf

快速使用（有两种方式）

一、script 标签引入方式（需下载本项目文件夹 css/pdfh5.css、js 内所有文件）

1.引入 css

< link rel = "stylesheet" href = "css/pdfh5.css" />

2.创建 div

< div id = "demo" >< /div>

3.依次引入 js

< script src = "js/pdf.js" type = "text/javascript" charset = "utf-8" >< /script> < script src = "js/pdf.worker.js" type = "text/javascript" charset = "utf-8" >< /script> < script src = "js/jquery-1.11.3.min.js" type = "text/javascript" charset = "utf-8" >< /script> < script src = "js/pdfh5.js" type = "text/javascript" charset = "utf-8" >< /script>

4.实例化

var pdfh5 = new Pdfh5 ( '#demo' , { pdfurl : "./default.pdf"

二、npm 安装方式（适应于 vue）

npm install pdfh5 < template > < div id = "app" > < div id = "demo" >< /div> < /template> < script > import Pdfh5 from "pdfh5" ; export default { name : 'App' , data () { return { pdfh5 : null mounted () { //实例化 this . pdfh5 = new Pdfh5 ( "#demo" , { pdfurl : "../../static/test.pdf" //监听完成事件 this . pdfh5 . on ( "complete" , function ( status , msg , time ) { console . log ( "状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this . totalNum ) < /script> < style > @ import "pdfh5/css/pdfh5.css" ; padding : 0 ; margin : 0 ; html , body , # app { width : 100 % ; height : 100 % ; < /style>

API 接口方法

注意： pdf 路径地址用相对路径加载速度最快，网络地址比较慢，本地绝对路径地址不能加载。

pdfh5 实例化的时候传两个参数，selector 选择器，options 配置项参数，options 可以不填写，会自动获取浏览器地址栏？file=后面的地址。会返回一个 pdfh5 实例对象，可以用来操作 pdf，监听相关事件

var pdfh5 = new Pdfh5 ( selector , options ); {String} pdf 地址，当前默认优先获取浏览器地址栏？file=后面的地址，如果地址栏没有，再拿配置项的 pdfurl 或者 data 来渲染 pdf，优先顺序：？file= > pdfurl > data URIenable {Boolean} true、false，默认 true 可以无视地址栏参数，只拿配置项的 pdfurl 或者 data 来渲染 pdf {String(blob) / Array(Uint8Array)} pdf 文件流，与 pdfurl 二选一。可以传普通文件流 blob，也可以传转过码的 Uint8Array {String} "ajax"、"fetch"，默认"fetch" 请求 pdf 方式 renderType {String} "canvas"、"svg"，默认"svg" pdf 渲染模式 scale {Number} 默认 1.3。canvas 模式下，为 2 渲染的清晰度比例 {Boolean} true、false，默认 false 是否开启懒加载 maxZoom {Number} 手势缩放最大倍数 tapZoomFactor {Number} 双击放大倍数 scrollEnable {Boolean} true、false，默认 true 是否允许 pdf 滚动 zoomEnable {Boolean} true、false，默认 true 是否允许 pdf 手势缩放 cMapUrl {String} 默认"./js/cmaps/" 解析 pdf 时，特殊情况下显示完整字体的 cmaps 文件夹路径 limit {Number} 限制 pdf 加载最大页数

pdf 文件流请求示例（以 jq ajax 为例）

$ . ajax ({ url : "https://gjtool.cn/pdfh5/git.pdf" , //假设这是pdf文件流的请求接口 type : "get" , mimeType : 'text/plain; charset=x-user-defined' , //jq ajax请求文件流的方式 cache : false , success : function ( data ) { var pdfh5 = new Pdfh5 ( '#demo' , { data : data

methods 方法列表

示例： 是否允许 pdf 滚动

pdfh5 . scrollEnable ( true ) //允许pdf滚动 pdfh5 . scrollEnable ( false ) //不允许pdf滚动 complete {Function(status, msg, time)} 监听 pdf 加载完成事件，加载失败、渲染成功都会触发。status 有两种状态 success 和 error render {Function(currentNum, time, currentPageDom)} 监听 pdf 渲染过程，currentPageDom 当前加载的 pdf 的 dom,currentNum 当前加载的 pdf 页数, {Function(scale)} 监听 pdf 缩放，scale 缩放比例 scroll {Function(scrollTop)} 监听 pdf 滚动，scrollTop 滚动条高度 backTop {Function} 监听回到顶部按钮的点击事件回调 zoomEnable {Function(flag)} 监听允许缩放，flag：true，false scrollEnable {Function(flag)} 监听允许滚动，flag：true，false {Function} 监听 pdfh5 显示 {Function} 监听 pdfh5 隐藏 reset {Function} 监听 pdfh5 还原 destroy {Function} 监听 pdfh5 销毁

打赏赞助作者：

感谢打赏！请打赏的童鞋在 pdfh5.js 打赏榜留下 github、QQ、微信。然后，我会对打赏过的童鞋的问题及时响应。（当然是在我不忙的时候啦）

jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。