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