pdf流文件轉圖片

需求：將后台返回的pdf流文件轉換成圖片與頁面其他內容一起打印
pdf流文件不能直接在前台顯示，需要借助pdf.js+viewer.js。

一般情況下，如果要打印pdf流文件，可以直接在新打開的viewer.html頁面點擊打印，但現在想跟頁面其他內容一塊打印，界面如下圖所示，選擇打印附件，再點擊打印時，需要將pdf文件跟當前頁面一起打印出來，當前頁面的內容，可以根據html()方法獲取，但是pdf內容應該怎么加入到html里呢？？

 

 我們可以借助pdf.js,worker.js, 當選擇打印附件的時候，調用loadPDF()方法，傳入流文件地址，在頁面中將pdf轉換成canvas,然后將canvas保存成圖片，將轉換成的img圖片地址添加到頁面里，這時候點擊打印，獲取html()就可以將pdf內容一並打印出來了。

function renderPDF(pdf,i,id) {
    console.log(pdf);
    pdf.getPage(i).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport(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);
        setTimeout(function(){  //當canvas渲染完成之后，將canvas內容轉換成圖片，添加到頁面上
            var img=new Image();
            img.src=canvas.toDataURL("image/jpeg");
            $("div[name=divImage]").append("<div style=\"page-break-before:always;text-align:left;\">" +
                "<p style=\"width:100%;text-align:left;font-size:13px;display:inline\">"+langConfig.finance.applyDetailNum+" :" + $("#container").attr("applyCode") + "</p>" +
                "</div>").append(img);
            // $("#imgList").append(img);
        },1000);

    })

};
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);
        }
    });
}
//創建和pdf頁數等同的canvas數
function createSeriesCanvas(num,template) {
    var id = '';
    for(var j = 1; j <= num; j++){
        id = template + j;
        createPdfContainer(id,'pdfClass');
    }
}
function createPdfContainer(id,className) {
    var pdfContainer = document.getElementById('container');
    var canvasNew =document.createElement('canvas');
    canvasNew.id = id;
    canvasNew.className = className;
    pdfContainer.appendChild(canvasNew);
};

缺點：如果pdf頁數較多時，canvas轉換過程耗時太長，頁面會有卡住的情況。
參考鏈接：https://www.jianshu.com/p/07943cbf2ecf