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