JS 如何将 HTML 页面导出为多页 PDF

前话

之前写了一篇博文 JS 如何将 HTML 页面导出为 PDF 。
当时只是自己有个需求，只是导出一页PDF，写个了示例。

之后就有同学私信我问我怎么导出多页PDF。好吧，其实这些看文档画画图自己是可以写出来的。以后也可能有转换HTML导出多页的PDF需求，就决定写一个库 renderPDF 吧。

地址在这里：https://github.com/pwcong/how-transform-html-into-multipage-pdf

原理

因为依赖了 jsPDF 这个库，所以导出 PDF 就查阅 jsPDF 的相关文档。

通过查阅文档可知，jsPDF 提供添加新一页的 API 函数 addPage()，因此我考虑给过长的div分页就围绕它进行思考。

这里说明一下大概步骤：

• 首先将要导出PDF的 div (这里命名为content) 渲染成canvas，获取该canvas的图片url数据 imgData

• 新建div命名为 page 插入到 body 中：

  1. 设置style、class、id均与 content 一致，然后再继续下面的步骤

  2. 设置宽度为 content 的宽度，高度设置为计算后得出的pageHeight，这里源码如下：

         var pdfProportion = pdfFormat[format][0] / pdfFormat[format][1];    var contentHeight = content.offsetHeight;    var contentWidth = content.offsetWidth;    var pageHeight = contentWidth / pdfProportion;    var pageWidth = contentWidth;

     其中 pdfFormat 为预定义对象， format 为输入的PDF格式

  3. 设置其背景为 url(imgData)

• 接着判断contentHeight和pageHeight

  • 若前者小于后者说明不用分页，直接添加图片数据导出，源码如下：

        if(contentHeight < pageHeight){        pdf.addImage(imgData, 'JPEG', 0, 0,pdfFormat[format][0],pdfFormat[format][1]/pageHeight*contentHeight);        pdf.save(pdfName);    }

  • 若前者大于后者，则需要分页：

    1. 先求出页数 count ，循环次数为 count-1
    2. 设置 page 的 background 偏移
    3. 接着渲染page为canvas获取图片url数据 pageData 插入 pdf 对象中，pdf 对象执行 addPage() 函数
    4. 添加最后一页，因为最后一页高度可能和pageHeight大小不一致，因此设置 page 的高度为计算的得出的 lastPageHeight ，渲染成canvas获取图片数据插入 `pdf 中

    5. 导出保存，源码如下：

           var index = 0;    var count = parseInt(contentHeight / pageHeight);    var page = document.createElement("div");    page.style.position = "absolute";    page.style.width = contentWidth + "px";    page.style.height = pageHeight + "px";    page.style.backgroundImage = "url(" + imgData + ")";    page.style.backgroundRepeat = "norepeat";    document.body.appendChild(page);    function addPage(i, onFinished){        page.style.backgroundPositionY = -pageHeight * i + "px";        html2canvas(page, {            onrendered: function(canvas) {                var pageData = canvas.toDataURL('image/jpeg');                pdf.addImage(pageData, 'JPEG', 0, 0,pdfFormat[format][0],pdfFormat[format][1]);                if(i + 1 < count){                    pdf = pdf.addPage();                    addPage(i + 1, onFinished);                }                else{                    onFinished()                }            }        });    }    addPage(index, function(){        page.style.backgroundPositionY = -pageHeight * count + "px";        var lastPageHeight = contentHeight % pageHeight;        page.style.height = lastPageHeight + "px";        html2canvas(page, {            onrendered: function(canvas) {                var pageData = canvas.toDataURL('image/jpeg');                pdf = pdf.addPage();                pdf.addImage(pageData, 'JPEG', 0, 0,pdfFormat[format][0], pdfFormat[format][1]/pageHeight*lastPageHeight);                document.body.removeChild(page);                onSuccess && onSuccess();                pdf.save(pdfName);            }        });    });

• 最后，body 删除名为 page 的 div

写在后面

因为个人能力不足，这个方法在导出页数过多的PDF的时候（例如20页以上）会有明显的浏览器卡顿。
而且没有进行什么优化，导出的PDF有点模糊，这个大佬们若有解决方法可以私信哈。

还有这方法有点 dirty hack，其实最 smart hack 的方法是，直接js执行函数 window.print() ，导出的 PDF 效果也十分好，毕竟是浏览器的官方实现。