- 基于html2canvas 1.0.0-rc.5版本,不同的版本存在很大的差异,因此本文档不具备通用性;
- 本案例未涉及多内容分页的情况;
实现打印的表格如下:
打印按钮
<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