使用html2canvas将html转pdf,由于table表的水平和竖直有滚动条导致显示不全(或者有空白)

本文主要是介绍使用html2canvas将html转pdf,由于table表的水平和竖直有滚动条导致显示不全(或者有空白),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

结果:

业务:将页面右侧的table打印成想要的格式的pdf,首先遇到的问题是table表上下左右都有滚轮而html2canvas相当于屏幕截图,那滚动区域如何显示出来是个问题?

gif有点模糊,但是大致功能可以看出

可复制代码在最下面

参考文章:主要思路就是table既然原始高度宽度不对,那你在转pdf之前就把他的宽度高度还原成真实的高度宽度然后打印成pdf,最后再转成原始高度宽度。(值得注意的是画布的高度宽度也要设置,和table一样就行)

html代码:

script代码

table表上有个“导出按钮”,点击就会触发handleExport函数

全部代码:

html:

      <divref="myContainer"id="fatherDiv"class="demo-form-inline"style="height: calc(100% - 120px)"><el-tableref="workforceTable":data="tableData"border@drop.native="drop($event)"@dragover.native="allowDrop($event)"stripe:span-method="objectSpanMethod":cell-class-name="tableCellClassName"max-height="100%"height="100%"class="demo-form-inline"id="factTable"><el-table-columnprop="time"label="时间"width="70"align="center"fixed></el-table-column><el-table-column:prop="item.sectorCode":label="item.sectorName"v-for="item in sectorList":key="item.sectorCode"align="center"><el-table-column:prop="seat.seatId":label="seat.seatName"v-for="seat in item.seatList":key="seat.seatId"align="center"min-width="102px"><template slot-scope="scope"><span:defProp="seat.seatId":defTime="scope.row.time":defIndex="scope.$index"></span><spanclass="el-tag el-tag--light"defid="scope.row[seat.seatId]"v-if="scope.row[seat.seatId]"><!-- 姓名(班组名称) --><!-- {{ scope.row[seat.seatId]+"("+scope.row["team"+seat.seatId]+")" }} --><!-- 姓名 -->{{ scope.row[seat.seatId] }}<iclass="el-tag__close el-icon-close"@click="onRemovePerson(scope.$index, seat.seatId)"v-if="isManual"></i></span></template></el-table-column></el-table-column><el-table-column:prop="seat.seatId":label="seat.seatName"v-for="seat in seatList":key="seat.seatId"align="center"min-width="102px"><template slot-scope="scope"><span:defProp="seat.seatId":defTime="scope.row.time":defIndex="scope.$index"></span><spanclass="el-tag el-tag--light"defid="scope.row[seat.seatId]"v-if="scope.row[seat.seatId]"><!-- 姓名(班组名称) --><!-- {{ scope.row[seat.seatId]+"("+scope.row["team"+seat.seatId]+")" }} --><!-- 姓名 -->{{ scope.row[seat.seatId] }}<iclass="el-tag__close el-icon-close"@click="onRemovePerson(scope.$index, seat.seatId)"v-if="isManual"></i></span></template></el-table-column></el-table></div>

script代码:

    handleExport() {this.$nextTick(() => {let pdfName =(this.deptRegion == "TWR"? "塔台": this.deptRegion == "APP"? "进近": "区域") +"管制室" +this.$common.parseTime(this.selectedMonth, "{y}/{m}/{d}") +"日排班表";document.getElementsByClassName("demo-form-inline")[0].classList.add("export-pdf-style");this.generatePDF(this.$refs.myContainer, pdfName);});},generatePDF(el, name) {let bodyWrapper = document.querySelector("#factTable .el-table__body-wrapper");let headerNode = document.querySelector("#factTable .el-table__header-wrapper");bodyWrapper.style.height = `${bodyWrapper.scrollHeight}px`;document.getElementById("fatherDiv").style.width = `${bodyWrapper.scrollWidth}px`;document.getElementById("fatherDiv").style.height = `${bodyWrapper.scrollHeight + headerNode.scrollHeight不}px`;setTimeout(function () {html2canvas(el, {scale: 4,width: bodyWrapper.scrollWidth + 60, // 为了使横向滚动条的内容全部展示,这里必须指定!!height: bodyWrapper.scrollHeight + headerNode.scrollHeight ,}).then((canvas) => {let contentWidth = canvas.width;let contentHeight = canvas.height;let pageHeight = (contentWidth / 592.28) * 841.89;      //一页pdf显示html页面生成的canvas高度;let leftHeight = contentHeight;      //未生成pdf的html页面高度let position = 0;          //页面偏移let imgWidth = 595.28;     //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高let imgHeight = (592.28 / contentWidth) * contentHeight;let pageData = canvas.toDataURL("image/jpeg", 1.0);let pdf = new jsPDF("", "pt", "a4");if (leftHeight < pageHeight) {          //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)pdf.addImage(pageData, "JPEG", 5, 30, imgWidth, imgHeight);       //当内容未超过pdf一页显示的范围,无需分页} else {while (leftHeight > 0) {pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight); //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度leftHeight -= pageHeight;position -= 841.89;if (leftHeight > 0) {           //避免添加空白页pdf.addPage();                //添加新页}}}pdf.save(`${name}.pdf`);document.getElementById("fatherDiv").style.width = `${100}%`;document.getElementById("fatherDiv").style.height = `calc(100% - 120px)`;document.getElementsByClassName("demo-form-inline")[0].classList.remove("export-pdf-style");});}, 200);},

css代码:

.export-pdf-style >>> .el-table ,
.export-pdf-style >>> .el-tag{background: white !important;color: black !important;
}.export-pdf-style >>> .el-table th,
.export-pdf-style >>> .el-table .el-table__cell {color: black;border: 1px solid black;background: white !important;
}

这篇关于使用html2canvas将html转pdf,由于table表的水平和竖直有滚动条导致显示不全(或者有空白)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/223324

相关文章

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

java中使用POI生成Excel并导出过程

《java中使用POI生成Excel并导出过程》:本文主要介绍java中使用POI生成Excel并导出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求说明及实现方式需求完成通用代码版本1版本2结果展示type参数为atype参数为b总结注:本文章中代码均为

Spring Boot3虚拟线程的使用步骤详解

《SpringBoot3虚拟线程的使用步骤详解》虚拟线程是Java19中引入的一个新特性,旨在通过简化线程管理来提升应用程序的并发性能,:本文主要介绍SpringBoot3虚拟线程的使用步骤,... 目录问题根源分析解决方案验证验证实验实验1:未启用keep-alive实验2:启用keep-alive扩展建