移动端预览PDF插件

本插件基于pdf.js和jquery

需要引入指定的js文件

1、pdf.js

2、pdf.worker.js

3、pdfh5.js

4、pdfh5.css

建议先引入jquery文件再引入上述文件

然后进行实例化

实例化代码示例

new Pdfh5(selector,options)

selector设置为放置pdf的容器，即可用dom选择器

options中设置pdf路径，如果不设置这个路径，则会默认那地址栏的?file=后面的pdf路径

示例代码

var pdfh5 = new Pdfh5('.pdfjs', {         pdfurl: 'default.pdf'     });

pdfurl可以设置为http访问地址

如若不设置pdf访问路径，取默认的地址栏地址 参数，在后台将file的参数进行base64转码后解码使用

注：不要同时设置options里面的pdf访问路径和浏览器的地址栏file参数，或者使用非file参数名进行地址接收

.pdfjs {         width: 100%;         height: 50%;         overflow: hidden;         background: #fff;         position: relative;     } <div class="pdfjs"></div>

这个插件原作者github链接  GitHub - gjTool/pdfh5: web/h5/移动端PDF预览插件  原作者会定期在上面修改解决问题，时刻关注进行本地资源更新

PDF文件流处理

html

1	<div id="jsPdf" ref="jsPdf"></div>

js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/**  * 将请求来的base64编码的pdf文件，替换多余的空格和换行（为了兼容其他浏览器）  * 再使用浏览器自带的atob()的方式解析  */ // 转化编码格式 function converData(data) {     data = data.replace(/[\n\r]/g, '');     var raw = window.atob(data);     var rawLength = raw.length;     var array = new Uint8Array(new ArrayBuffer(rawLength));     for (var i = 0; i < rawLength; i++) {         array[i] = raw.charCodeAt(i)     }     return array } $.ajax({     url: '',     type: 'post',     data: param,     contentType: 'application/json',     success: function (res) {         var pdfEntity = res;         var array = converData(pdfEntity);         var pdfh5 = new Pdfh5("#jsPdf", {             data: array,         });         // 监听完成事件         pdfh5.on("complete", function (status, msg, time) {             // 处理插件不隐藏 loadEffect 的问题（已向作者提issues,不知道作者会不会解决）             $(".loadEffect").hide();         })     } })

PDF添加水印（请使用新版本的pdfh5，这里以V1.3.11为例）

V1.3.11版本的插件支持添加水印功能，但是只支持单张的图片，不能重复的铺满整个页面，所以做了源码的修改。（已向作者提issues,不知道作者会不会优化）

找到pdfh5.js，修改成以下代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

if (options.logo) {     // var pdfLogo = document.createElement('img');     var pdfLogo = document.createElement('div');     pdfLogo.className = 'pdfLogo';     if (options.logo.top) {         pdfLogo.style.top = options.logo.top;     }     if (options.logo.left) {         pdfLogo.style.left = options.logo.left;     }     if (options.logo.right) {         pdfLogo.style.right = options.logo.right;     }     if (options.logo.bottom) {         pdfLogo.style.bottom = options.logo.bottom;     }     // if(options.logo.width){     //     pdfLogo.style.width = options.logo.width;     // }     // if(options.logo.height){     //     pdfLogo.style.height = options.logo.height;     // }     if (options.logo.src) {         pdfLogo.style.backgroundImage = "url('" + options.logo.src + "')";         pdfLogo.style.position = "absolute";     }     if (options.logo.zIndex) {         pdfLogo.style.zIndex = options.logo.zIndex;     } else {         pdfLogo.style.zIndex = "101";     }     if (options.logo.backgroundSize) {         pdfLogo.style.backgroundSize = options.logo.backgroundSize;     } else {         pdfLogo.style.backgroundSize = "contain";     }     // pdfLogo.src = options.logo.src;     container.appendChild(pdfLogo); }

使用

1 2 3 4 5 6 7 8 9 10 11 12

var pdfh5 = new Pdfh5("#jsPdf", {     data: array,     logo: {         src: "images/watermark.png",         top: "0",         bottom: "0",         left: "0",         right: "0",         backgroundSize: "120px 80px",         opacity: '0.5'     } });