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

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

实现打印的表格如下:
html2canvas生成PDF并下载的解决方案

打印按钮

<div style="padding: 30px 0;text-align: center;">
    <button type="button" class="btn" onclick='printOut("jieji007")'>下载PDF文档</button>
</div>
<div class="page">
    <div class="page_box">
        <div id="printId">
            <div class="content">
           <!----打印区--->
            </div>
        </div>
    </div>
</div>

合并的table

  <table align="center" border="1" cellspacing="0">
                <tr>
                    <td colspan="5" class="title_td" style="font-size: 32px;padding: 10px;">山东省中医全科医生转岗培训结业考核报名表</td>
                </tr>
                <tr>
                    <td width="100px">姓名</td>
                    <td>lockdatav</td>
                    <td width="100px">性别</td>
                    <td>女</td>
                    <td rowspan="8" style="padding: 10px;"><img width="160" height="242" alt="lockdatav" src="upload/2022-01/4413_7060955e92d45a7ab29fc52ce14bc697.jpg"></td>
                </tr>
                <tr>
                    <td>地区</td>
                    <td>青岛市李沧区</td>
                    <td>身份证号</td>
                    <td>410622198207175018</td>
                </tr>
                <tr>
                    <td>出生年月</td>
                    <td>2022年01月</td>
                    <td>联系电话</td>
                    <td>13506843428</td>
                </tr>
                <tr>
                    <td>毕业时间</td>
                    <td>2022年01月</td>
                    <td>毕业学校</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>工作单位</td>
                    <td>1</td>
                    <td>所在科室</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>职称</td>
                    <td>1</td>
                    <td>职务</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>最高学历</td>
                    <td>高中</td>
                    <td>从事专业</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>通讯地址</td>
                    <td>1</td>
                    <td>电子邮箱</td>
                    <td>1@2.com</td>
                </tr>
                <tr>
                    <td colspan="5" class="title_td">理论培训信息</td>
                </tr>
                <tr>
                    <td>培训时间</td>
                    <td>2022年01月 至 2022年02月</td>
                    <td>培训单位</td>
                    <td colspan="2">1</td>
                </tr>
                <tr>
                    <td colspan="5" class="title_td">基层培训信息</td>
                </tr>
                <tr>
                    <td>培训时间</td>
                    <td>2022年01月 至 2022年02月</td>
                    <td>培训单位</td>
                    <td colspan="2">1</td>
                </tr>
                <tr>
                    <td colspan="5" class="title_td">临床培训信息</td>
                </tr>
                <tr>
                    <td>培训时间</td>
                    <td>2022年01月 至 2022年02月</td>
                    <td>培训单位</td>
                    <td colspan="2">1</td>
                </tr>
                <tr>
                    <td colspan="5" class="title_td">身份证信息</td>
                </tr>
                <tr>
                    <td colspan="5"><a href="upload/2022-01/4413_17e842cd98df89f61635f5d582639abe.jpg" target="_blank"><img width="120" height="90" alt="lockdatav" src="upload/2022-01/4413_17e842cd98df89f61635f5d582639abe.jpg"></a> <a href="upload/2022-01/4413_683f00ff6c496dab3ce60d865dfb9406.jpg" target="_blank"><img width="120" height="90" alt="lockdatav" src="upload/2022-01/4413_683f00ff6c496dab3ce60d865dfb9406.jpg"></a></td>
                </tr>
                <tr>
                    <td colspan="5" class="title_td">执业医师资格证</td>
                </tr>
                <tr>
                    <td colspan="5"><a href="upload/2022-01/4413_1958cbfd84d72d4f9d8c6de7d223411a.jpg" target="_blank"><img width="120" height="90" alt="lockdatav" src="upload/2022-01/4413_1958cbfd84d72d4f9d8c6de7d223411a.jpg"></a></td>
                </tr>
                <tr>
                    <td colspan="5" class="title_td">培训过程考核登记表</td>
                </tr>
                <tr>
                    <td colspan="5"><a href="upload/2022-01/4413_4f05dae27b7f18189c668c03f223a39b.jpg" target="_blank"><img width="120" height="90" alt="lockdatav" src="upload/2022-01/4413_4f05dae27b7f18189c668c03f223a39b.jpg"></a></td>
                </tr>
            </table>

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 < imgH) PDF.addImage(whiteImg, "jpeg", 0, 0, pdfW, 60), PDF.addImage(pageData, "jpeg", 0, 0, imgX, imgH), PDF.addImage(whiteImg, "jpeg", 0, 781.89, pdfW, 60); else for (; pageTempHeight > 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

上一篇:洛谷 P8003 题解


下一篇:博客园图片批量自动上传