将HTML页面转换为PDF文件并导出

桃扇骨 2022-02-26 04:52 503阅读 0赞

目前，在大多数的管理系统中，都会有这样一个功能：根据相关的条件查询相应的数据，并生成可视化报表，然后可导出为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();
            }
        },
    })

以上为笔者在项目中的部分核心代码，如有问题，欢迎指正。

[html2canvas.js]: http://www.bootcdn.cn/html2canvas/
[jspdf.min.js]: http://www.bootcdn.cn/jspdf/