pdf.js、pdfobject.js实现pdf文件预览

一、加载插件（pdf.js、pdfobject.js）

1. pdfobject.js使用<embed>标签直接显示，

    优点：使用简单，加载速度快；缺点： android环境中不支持（仅测试了一台oppo手机），即   PDFObject.supportsPDFs=false；

2.pdf.js将pdf渲染成canvas显示，

    优点：android、ios都能显示；缺点：渲染过程中耗时，在一定的缩放倍数（scale）下容易使字体变得模糊

二、加载文件方式：

1.pdf文件url （ios环境采用pdfobject.js能直接预览；android不能预览，可通过下载到本地后使用pdf.js预览）；

2.pdf文件流（ios在pdf.js、pdfobject.js都能预览，android在pdf.js下预览）；

pdf.js下载地址

pdfobject.js下载地址

-------------------------代码分割线-----------------------------------

样式部分

<style>

#page_count {
    position: fixed;
	left: 16px;
	top: 10px;
	z-index: 1000;
	color: #999999;
}
			
#iosContainer {
	width: 100%;
	height: 100%;
	top: 0;
}
			
#androidContainer {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	padding: 0;
}
			
</style>
           

html 部分

<div>

	<!-- iospdf容器 -->
	<div id="iosContainer"></div>
	<!-- android pdf页数容器 -->
	<span id="page_count"></span>
	<!-- android pdf 容器 -->
	<div id="androidContainer"></div>

</div>
           

js引入

<script src="../../js/libs/pdf/pdf.js"></script>
<script type="text/javascript" src="../../js/libs/pdf/pdfobject.js"></script>
           

js部分----ios加载：

PDFObject.embed(url, "#iosContainer");
           

js部分----android加载

var pdfDoc = null,
	pageNum = 1,
	pageRendering = false,
	pageNumPending = null,
	scale = 0.6,
	ratio = 2,//对字体模糊进行处理
	canvasList;

//ios使用pdf.js预览同方法
function loadAndroidPDF(url) {
	//pdf.worker.js负责核心解析
	PDFJS.workerSrc = '../../../../js/libs/pdf/pdf.worker.js';
	PDFJS.getDocument(url).then(function(pdfDoc_) {
	pdfDoc = pdfDoc_;
	document.getElementById('page_count').textContent = '总页数:' + pdfDoc.numPages;
	    for(var i = 1; i <= pdfDoc.numPages; i++) {
		    renderPage(i);
	    }
	},function() {},
	function() {});
}


function renderPage(num) {
	pageRendering = true;
	// Using promise to fetch the page
	pdfDoc.getPage(num).then(function(page) {
		var viewport = page.getViewport(scale);
		var canvas = document.createElement('canvas');
		canvas.height = viewport.height * ratio;
		canvas.width = viewport.width * ratio;
		canvas.style.width = viewport.width + "px";
		canvas.style.height = viewport.height + "px";
		var ctx = canvas.getContext('2d');
		ctx.scale(ratio, ratio);
		canvasList.appendChild(canvas);
		canvasList.appendChild(document.createElement('hr'));
		//Render PDF page into canvas context
		var renderContext = {
			canvasContext: ctx,
			viewport: viewport
		};
		var renderTask = page.render(renderContext);
		// Wait for rendering to finish
		renderTask.promise.then(function() {
			pageRendering = false;
			if(pageNumPending !== null) {
			// New page rendering is pending
				renderPage(pageNumPending);
				pageNumPending = null;
			}
		});
	});
}
           

android 通过mui插件下载后进行加载：

function download(url, fileId) {
	var wt = plus.nativeUI.showWaiting("");
	task = plus.downloader.createDownload(
		   url,
           {
		    filename: "_downloads/" + fileId + ".pdf",
			timeout: 60
		},
		function(d, status) {
			if(status == 200) {
			    wt.close();
			    //console.log(JSON.stringify(d));
			    plus.io.resolveLocalFileSystemURL(d.filename, function(entry) {
				    loadAndroidPDF(entry.toLocalURL());
			    });
			} else {
				mui.toast("文件下载失败");
			}
	});
	task.start();
}