使用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

相关文章

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab