pdf.js 在当前页面打开

**

pdf.js 在当前页面打开

**

1. 需要引入pdf.js文件 ；下载链接http://mozilla.github.io/pdf.js/getting_started/#download

// An highlighted block
$(function(){
	PDFJS.workerSrc = '../build/pdf.worker.js';//加载核心库
	// url pdf路径 
	PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
		// 获取第一页数据
		pdf.getPage(1).then(function getPageHelloWorld(page) {
			var scale = 1.5; //设置缩放比例
			var viewport = page.getViewport(scale);
			var canvas = document.getElementById('canvas'); 
			var context = canvas.getContext('2d');
			canvas.height = viewport.height;
			canvas.width = viewport.width;
			var renderContext = {
				canvasContext: context,
				viewport: viewport
			};
			page.render(renderContext);
		});
	});

})

3. 设置HTML内容

<canvas id="canvas"></canvas>

这种写法只能显示第一张pdf的内容，一个canvas 容器只能显示一张，所以多页码的时候需要获取页码，去遍历创建canvas 容器

	//代码
	 $(function(){
        var url ='../img/2.pdf'; //本地文件
        PDFJS.workerSrc = '../build/pdf.worker.js';//加载核心库
        PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
            for(var i=0; i<=pdf.numPages; i++){ //这边需要注意是<=
                pdf.getPage(i).then(function getPageHelloWorld(page) {
                    var scale = 1.8; //缩放比例
                    var viewport = page.getViewport(scale);
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    $("#container").append(canvas);
                    page.render({canvasContext: context, viewport: viewport});
                 })
            }
        });
    })

用作个人记录
第一次写博客请大家见谅，谢谢