PC端与手机端h5页面pdf展示

• • pdfh5.js 使用
  • pdf.js 2.13.216版本的使用

我们web经常会遇到对于pdf文件的展示，对于PC端我们可以直接通过浏览器打开pdf进行预览。但是对于手机端，我们的h5页面中连接的pdf文件在安卓上会跳转到下载，在IOS上会直接打开。对于这种需要兼容pc端与手机端的展示我们可以使用pdf.js来做。

解决方案：
1，pdf.js
2，pdfh5.js

下面的pdfh5.js是对上面pdf.js的封装，pdf.js对于2.0.xx版本与2.1.xx版本的使用有些许区别。pdfh5.js的使用起来更加简单。
我这里是传统开发模式，没有使用npm进行安装。

pdfh5.js 使用

原pdfh5.js博客：https://www.gjtool.cn/archives/pdfh5

pdfh5.js 使用步骤：
1，引入css

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

2，引入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-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>

3，创建div

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

4，实例化

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

5，其他方法

// $.ajax({
	// 	url: "页面崩溃PDF(1).pdf", //假设这是pdf文件流的请求接口
	// 	type: "get",
	// 	mimeType: 'text/plain; charset=x-user-defined', //jq ajax请求文件流的方式
	// 	// dataType: 'arraybuffer',
	// 	success: function(data) {
	// 		pdfh5 = new Pdfh5('#demo', {
	// 			data: data,
	// 		});
	// 		pdfh5.on("success", function(time) {
	// 			time = time / 1000
	// 			console.log("pdf渲染完成，总耗时" + time + "秒");
	// 			//滚动到第3页
	// 			// pdfh5.goto(3);
	// 			this.download("2222",function(){
	// 				console.log(11111)
	// 			})
	// 		})
	// 	}
	// });
	// axios.get("https://www.gjtool.cn/pdfh5/git.pdf", {
	// 	responseType: "arraybuffer"
	// }).then(res => {
	// 	pdfh5 = new Pdfh5('#demo', {
	// 		data: res.data
	// 	});
	// 	pdfh5.on("success", function(time) {
	// 		time = time / 1000
	// 		console.log("pdf渲染完成，总耗时" + time + "秒");
	// 		//滚动到第3页
	// 		// pdfh5.goto(3);
	// 		this.download()
	// 	})
	// })
	pdfh5 = new Pdfh5('#demo', {
		pdfurl: "test.pdf",
		URIenable:true,
		goto: 0,
		// scrollEnable: false // 是否允许pdf滚动
		zoomEnable: false, // 是否允许pdf手势缩放
		// limit: 3
	});
	// //监听pdf渲染成功
	// pdfh5.on("success", function(time) {
	// 	time = time / 1000
	// 	console.log("pdf渲染完成，总耗时" + time + "秒");
	// 	//滚动到第3页
	// 	// pdfh5.goto(3);
	// 	this.download("xxxx",function(){
	// 		console.log(11111)
	// 	})
	// })
	// pdfh5.on("zoom", function(scale) {
	// 	console.log(scale)
	// })
	// new Pdfh5('#demo2', {
	// 	pdfurl: "222.pdf"
	// });
	// new Pdfh5('#demo3', {
	// 	pdfurl: "git.pdf"
	// });
	// setTimeout(() => {
	//     var pdfh5 = new Pdfh5('#demo', {
	//         pdfurl: "https://www.gjtool.cn/pdfh5/git.pdf"
	//     });
	//     setTimeout(() => {
	//         var pdfh5 = new Pdfh5('#demo', {
	//             pdfurl: "1.pdf"
	//         });
	//         setTimeout(() => {
	//             var pdfh5 = new Pdfh5('#demo', {
	//                 pdfurl: "test.pdf"
	//             });
	//             pdfh5.on("complete", function (status, msg, time) {
	//                 console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
	//             })
	//         }, 5000);
	//     }, 5000);
	// }, 5000);

	//配置项参数 renderType:"svg" 渲染模式为svg，默认canvas
	// var pdfh5 = new Pdfh5('#demo', {
	//     pdfurl: "./default.pdf",
	//     renderType:"svg"
	// });

	//配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载
	// var pdfh5 = new Pdfh5('#demo', {
	//     pdfurl: "./default.pdf",
	//     lazy:true 
	// });

	//配置项参数 URIenable:true 开启获取地址栏file参数，获取地址栏pdf路径?file=xxx.pdf，默认false不开启
	// var pdfh5 = new Pdfh5('#demo', {
	//     URIenable:false,
	//     pdfurl: "./default.pdf"
	// });

	//配置项参数 是否显示小部件 顶部绿色加载进度条loadingBar 左上角页码显示pageNum 右下角回到顶部按钮backTop  默认显示
	//		var pdfh5 = new Pdfh5('#demo', {
	// 			 loadingBar: false,
	//           pageNum:false,
	//           backTop:false
	// 		});

	//配置项参数data，文件流形式传入  pdfurl和data二选一
	//		var pdfh5 = new Pdfh5('#demo', {
	// 			data: data
	// 		});

	//配置项参数scrollEnable:false不允许pdf滚动,true允许pdf滚动  默认允许
	//		var pdfh5 = new Pdfh5('#demo', {
	// 			scrollEnable:false,//是否允许pdf滚动
	// 			pdfurl: url
	// 		});
	//pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动

	//配置项参数zoomEnable:false不允许pdf手势缩放,true允许pdf手势缩放  默认允许
	//		var pdfh5 = new Pdfh5('#demo', {
	// 			zoomEnable:false,//是否允许pdf手势缩放
	// 			pdfurl: url
	// 		});
	//pdfh5.zoomEnable(true)允许pdf手势缩放，pdfh5.zoomEnable(false)不允许pdf手势缩放

	//pdfh5还原、销毁（附带回调函数）：   pdfh5.reset pdfh5.destroy 
	//pdfh5显示、隐藏（附带回调函数）：   pdfh5.show pdfh5.hide 

	//pdf准备开始渲染，此时可以拿到pdf总页数
	// pdfh5.on("ready", function() {
	// 	console.log("pdf准备开始渲染，总页数：" + this.totalNum)
	// })

	//监听pdf渲染失败
	// pdfh5.on("error", function (time) {
	//     console.log("渲染失败，总耗时" + time + "毫秒")
	// })
	//监听完成事件，加载失败、渲染成功都会触发
	// pdfh5.on("complete", function(status, msg, time) {
	// 	console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum, msg)
	// })

	//监听渲染中事件
	// pdfh5.on("render", function(currentNum, time, currentPageDom) {
	// 	// currentPageDom.append("<span class='name-logo'>张三</span>")
	// 	console.log("当前页码：" + currentNum)
	// })
	//on方法,监听事件： 开始初始化 init 准备渲染pdf ready 加载完成 complete 加载失败 error 加载成功 success 渲染pdf中 render
	// 缩放zoom   滚动scroll 显示show  隐藏hide 还原reset 销毁destroy  允许缩放zoomEnable 允许滚动scrollEnable

	//pdfh5支持在线预览 
	//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf

所需的js 与 css在 资源下载

pdf.js 2.13.216版本的使用

原pdf.js官网：http://mozilla.github.io/pdf.js/
pdf.js参考博文 https://www.jb51.net/html5/771927.html

从官网上下载的pdf.js：

从官网上下载的文件有两个文件夹，分别对应着两种使用方式：
1，build文件夹的使用方式是h5页面，使用的是canvas来进行将pdf文件绘制出来，一页一图的绘制。

<script type='text/javascript' src='./build/pdf.js'></script>
<div id="canvas"></div>

pdfjsLib.GlobalWorkerOptions.workerSrc = './build/pdf.worker.js'; 

var url = './111.pdf';
loadPDF(url); // 渲染页面

//读取pdf文件，并加载到页面中
	function loadPDF(fileURL) {
		pdfjsLib.getDocument(fileURL).then(function (pdf) {
			//用 promise 获取页面
			var id = '';
			var idTemplate = 'cw-pdf-';
			var pageNum = pdf.numPages;
			//根据页码创建画布
			createSeriesCanvas(pageNum, idTemplate);
			//将pdf渲染到画布上去
			for (var i = 1; i <= pageNum; i++) {
				id = idTemplate + i;
				renderPDF(pdf, i, id);
			}
		});
	}

function createPdfContainer(id, className) {
		var pdfContainer = document.getElementById('canvas');
		var canvasNew = document.createElement('canvas');
		
		canvasNew.id = id;
		canvasNew.className = className;
		pdfContainer.appendChild(canvasNew);
	};

//渲染pdf
	//建议给定pdf宽度
	function renderPDF(pdf, i, id) {
		pdf.getPage(i).then(function (page) {
	 
			var scale = 0.5;
			var viewport = page.getViewport(scale);
	 
			//
			//  准备用于渲染的 canvas 元素
			//
	 
			var canvas = document.getElementById(id);
			var context = canvas.getContext('2d');
			canvas.height = viewport.height;
			canvas.width = document.documentElement.clientWidth;
			//
			// 将 PDF 页面渲染到 canvas 上下文中
			//
			var renderContext = {
				canvasContext: context,
				viewport: viewport,
				enableWebGL: false,
				renderInteractiveForms: false
			};
			page.render(renderContext);
			
		});
		
	};
	//创建和pdf页数等同的canvas数
	function createSeriesCanvas(num, template) {
		var id = '';
		for (var j = 1; j <= num; j++) {
			id = template + j;
			createPdfContainer(id, 'pdfClass');
		}
	}
	

上述代码渲染出来的pdf在手机端和PC端的都显示的比较模糊，几乎不存在可用性，网上也有关于显示模糊的处理方案。这里我没有实践过就不多写了。

2，web文件夹使用的方式是将web文件夹放置到服务器上，然后通过viewer.html?file=123.pdf进行访问或者viewer.html?file=123.action直接使用后台输出的pdf流来使用。具体的网上资料可以自行参考。

所需资源下载：资源下载