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

基于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

html2canvas生成PDF并下载的解决方案相关推荐

Flask 生成pdf并下载
生成pdf的方法千千万万,在这里我用来pdfkit 来作为工具包,具体怎么安装请百度查询安装教程(要安装wkhtmltopdf这个东西,在代码中需要调用它,有时间的话我会来再出一篇如何安装这个工具的文 ...
Vue中前端实现生成 PDF 并下载
思路: 通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文件. 安装及引入 // 将页面 html 转换成图片 npm in ...
HTML怎么把文字分栏_JS将HTML生成PDF并下载
作者:grain先森链接:https://www.jianshu.com/p/4a550e07d50b 1. html2canvas 简介我们可以直接在浏览器端使用html2canvas,对整个或局部 ...
vue 页面生成pdf并下载 vue页面转PDF
一: 安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf --save ...
vue项目中页面生成pdf并下载，vue 中页面转PDF
方法一第一步.安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf -- ...
Java 使用itext生成pdf以及下载
使用方法: 1.需要两个jar包: iText-5.0.6.jar //必须使用该版本,否则缺少相关的方法 TextAsian.jar //是为了文档中正常显示中文所必须引用的包 TextAsi ...
java生成pdf并下载
先在项目中导入MAVEN依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itextp ...
java ireport生成pdf_jasperreport 生成pdf实现下载与打印
[实例简介] 通过ireport生成模版,使用jasperreport调用模版,通过servlet生成pdf格式的文件,显示于页面以实现本地打印功能 [实例截图] [核心代码] Test3 └── T ...
java生成PDF,并下载到本地
1.首先要写一个PDF工具类,以及相关工具 2.PDF所需jar包 iText是一种生成PDF报表的Java组件 freemarker是基于模板来生成文本输出 <dependency>&l ...

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

打印按钮

合并的table

PDF封装函数

html2canvas生成PDF并下载的解决方案相关推荐

最新文章

热门文章