將HTML頁面轉換為PDF文件並導出

目前，在大多數的管理系統中，都會有這樣一個功能：根據相關的條件查詢相應的數據，並生成可視化報表，然后可導出為PDF文件。本文只展現生成可視化報表之后導出PDF文件的過程，生成可視化的報表可使用Echarts，D3js等框架。

1.需要引入的文件

html2canvas.js（根據實際情況選擇相應的版本）
jspdf.min.js（根據實際情況選擇相應的版本）

2.實現思路

（1）在body中將需要生成PDF的HTML復制一份，切記：如果元素中含有ID，則必須重新給定
（2）將新的元素設置為position:absolute; 脫離文檔流，因為處於文檔流中被瀏覽器遮擋的部分不會生成PDF。
（3）利用html2canvas.js將新的元素生成圖片
（4）利用jspdf.min.js將圖片生成PDF文件並保存到本地。

3.實現代碼

(1)HTML代碼
 
/*將要生成PDF的HTML代碼*/
<div id="pdf">
………………………………
</div> 

(2)JS代碼

/*復制元素，注意ID*/
$("body").append('<div id="pdf1">…………………………………………………………</div>');
/*設置新元素樣式*/
 $("#pdf1").css({
    "background-color": "#fff",
    "position": "absolute",
    "top": "0px",
    "z-index": "-1",
    "height": $("#pdf").height()
});
/*html2canvas生成圖片，jspdf生成PDF文件*/
html2canvas($("#pdf1"), {
    background: "#fff",
    allowTaint: true,
    taintTest: false,
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pageHeight = contentWidth / 592.28 * 841.89;
        var leftHeight = contentHeight;
        var position = 0;
        var imgWidth = 595.28;
        var imgHeight = 592.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var img = new Image();
        img.src = pageData;
        var pdf = new jsPDF('p', 'pt', 'a4');
        img.onload = function() {
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save('report_pdf_' + new Date().getTime() + '.pdf');
            $("#pdf1").remove();
        }
    },
})

以上為筆者在項目中的部分核心代碼，如有問題，歡迎指正。