【pdf.js】pdf文件转canvas，在h5页面直接浏览PDF文件

前段时间项目有一个需求，PDF文件要在线浏览，应用到 pdf.js，一些应用经验记录一下。

一、解决过程：

    1、首先有一个参考的网站，根据参考，发现PDF文件的每一页都被转成了 canvas

    2、第一反应是将PDF文件每一页，先转成 IMG，然后再将图片放到画布上。（难点：img 转 canvas）

var img = new Image();
img.src = '../../../assets/src/images/0_2.png';
img.onload = function () {
    //创建canvas DOM对象,并设置其宽高和图片一样
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    //坐标(0,0)表示从此处开始绘制,相当于偏移
    canvas.getContext("2d").drawImage(img, 0, 0);
    $('body').append(canvas)
}

这种方式可以实现 img 转 canvas，但pdf不止一页，并且还需要先将pdf先转成img ，所以觉得不可行。

  3、然后就找到了 pdf.js 可以将pdf的每一页转成canvas

二、pdf.js的用法

官网地址：http://mozilla.github.io/pdf.js/

在官网的例子里，写了用法，但是转canvas的时候需要指定pdf的具体页数（每次只能转一页）

  html部分

<canvas id="the-canvas"></canvas>

  js部分(记得要先引pdf.js库，可以在官网下载)

pdfjsLib.getDocument('pdf文件地址').promise.then(function(pdf) {
      pdf.getPage(1).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale, });
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
      });
});
//这样就可以将pdf文件的第一页加载到页面的canvas元素里了

第二种：pdf文件为多页

html部分

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

js部分

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

//建议给定pdf宽度
function renderPDF(pdf, i, id) {
    pdf.getPage(i).then(function (page) {
        var scale = 4;  //scale的值是canvas的渲染尺寸，影响清晰度
        var viewport = page.getViewport({
	    scale: scale
        });
    //
    //  准备用于渲染的 canvas 元素
    //
        var canvas = document.getElementById(id);
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
    //
    // 将 PDF 页面渲染到 canvas 上下文中
    //
        var renderContext = {
            canvasContext: context,
	    viewport: viewport
        };
        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文件，并加载到页面中
function loadPDF(fileURL) {
    pdfjsLib.getDocument(fileURL).promise.then(function (pdf) {
        //用 promise 获取页面
	var id = '';
	var idTemplate = 'cw-pdf-';
	var pageNum = pdf.numPages;  //pdf文件总页数
	//根据页码创建画布
	createSeriesCanvas(pageNum, idTemplate);
	$("#canvas canvas").css("width", "100%");  //canvas展示宽度
	//将pdf渲染到画布上去
	for (var i = 1; i <= pageNum; i++) {
	    id = idTemplate + i;
	    renderPDF(pdf, i, id);
	}
    });
}
//调用
loadPDF('pdf文件路径')

这样多页的pdf文件就可以转成canvas在线预览了。

特别提醒：Note: the worker is not enabled for file:// urls, so use a server.

前端直接用浏览器打开无法预览，所以需要搭建本地服务，或者放到服务器上。

demo地址：https://github.com/MeichaoWen/pdftocanvas