本插件基于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>`

/**

* 将请求来的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，修改成以下代码：

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);

}

使用

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'

}

});

移动端预览PDF插件相关推荐

h5,移动端预览pdf文件，使用pdfh5插件
苹果机是可以直接打开一个 pdf的网络路径进行预览的问题是安卓直接打开的话就跳转到下载页面或者那个大哥可以找一个h5 页面可以预览word文档 (其实吧也可以只要你愿意花钱还是能 ...
使用pdf.js在移动端预览pdf文档
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...
vue 手机移动端预览pdf
最新需求是在手机实现pdf的预览,最终采用的是pdfh5,可以保存为图片,比较方便首先pdf返回的是pdf文件流接收pdf文件流的时候需要设定文件类型responseType: 'arraybuf ...
UNIAPP在线预览PDF文档DCloud插件
UniApp 在线预览PDF&插件使用该实现方式基于pdf.js,使用网页嵌套web-view标签. 插件优点:内容懒加载,可自行决定工具栏内容,@message能监听用户操作,支持H5.安 ...
pdf.js在线预览PDF文件实现
pdf.js是一款功能比较强大的在线预览PDF插件,自带"打印","搜索","翻页"等功能,强大且实现方便,并且兼容性比较好(兼容ie10及 ...
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
网页嵌入pdf、在线预览pdf工具及插件（转）
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...
uni-app移动端-H5-微信小程序在线预览pdf，图片，视频
封装了一个插件,可直接导入hbuilderx查看使用: 插件地址:uni-app移动端-H5-微信小程序在线预览pdf,图片,视频 <template><view class=&qu ...
html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...

移动端预览PDF插件

PDF文件流处理

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

移动端预览PDF插件相关推荐

最新文章

热门文章