pdf流文件转图片

Posted 2020-12-13 wj19940520

需求：将后台返回的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