html2canvas生成PDF并下载的解决方案

1. 基于html2canvas 1.0.0-rc.5版本，不同的版本存在很大的差异，因此本文档不具备通用性；
2. 本案例未涉及多内容分页的情况；

实现打印的表格如下：

打印按钮

    下载PDF文档

合并的table

  
                
                    山东省中医全科医生转岗培训结业考核报名表
                
                
                    姓名
                    lockdatav
                    性别
                    女
                    
                
                
                    地区
                    青岛市李沧区
                    身份证号
                    410622198207175018
                
                
                    出生年月
                    2022年01月
                    联系电话
                    13506843428
                
                
                    毕业时间
                    2022年01月
                    毕业学校
                    2
                
                
                    工作单位
                    1
                    所在科室
                    2
                
                
                    职称
                    1
                    职务
                    2
                
                
                    最高学历
                    高中
                    从事专业
                    12
                
                
                    通讯地址
                    1
                    电子邮箱
                    1@2.com
                
                
                    理论培训信息
                
                
                    培训时间
                    2022年01月 至 2022年02月
                    培训单位
                    1
                
                
                    基层培训信息
                
                
                    培训时间
                    2022年01月 至 2022年02月
                    培训单位
                    1
                
                
                    临床培训信息
                
                
                    培训时间
                    2022年01月 至 2022年02月
                    培训单位
                    1
                
                
                    身份证信息
                
                
                     
                
                
                    执业医师资格证
                
                
                    
                
                
                    培训过程考核登记表
                
                
                    
                
            

PDF封装函数

/*PDF封装函数*/
function printOut(id) {
    //跳转页面顶部，防止空白;
    scroll(0,0);
    //生成画布;
    html2canvas(document.querySelector("#printId"), {allowTaint: true, scale: 2}).then((function (canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //console.log(contentWidth);
        //console.log(contentHeight);

        var pageData = canvas.toDataURL("image/jpeg", 1);
        var pdfX, pdfY = contentHeight / 2 * .75;
        var whiteHeight = 60;

        /*A4纸的尺寸[595.28,841.89]
        * html页面生成的canvas在pdf中图片的宽高
        * */
        var pdfW = 595.32;
        var pdfH = 841.89;
        var imgX = contentWidth / 2 * .75;
        var imgY = contentHeight / 2 * .75;
        var imgH = 721.89;
        var position = 60; //页面偏移

        var pageTempHeight = contentHeight / 2 * .75;
        var PDF = new jsPDF("", "pt", "a4");
        if (imgY  0;) PDF.addImage(pageData, "jpeg", 0, position, imgX, imgY), PDF.addImage(whiteImg, "jpeg", 0, 0, pdfW, 60), PDF.addImage(whiteImg, "jpeg", 0, 782.89, pdfW, 60), position -= imgH, (pageTempHeight -= imgH) > 0 && PDF.addPage();
        PDF.save(id + '_' + new Date().getTime() + '.pdf');
    }))
}

    //跳转页面顶部，防止空白;
    scroll(0,0);

@lockdata.cn