技能网站建设项目需求,博客为什么用wordpress,wordpress图片墙,网络营销与策划实训结果#xff1a; 业务#xff1a;将页面右侧的table打印成想要的格式的pdf#xff0c;首先遇到的问题是table表上下左右都有滚轮而html2canvas相当于屏幕截图#xff0c;那滚动区域如何显示出来是个问题#xff1f;
gif有点模糊#xff0c;但是大致功能可以看出
可复制…
结果 业务将页面右侧的table打印成想要的格式的pdf首先遇到的问题是table表上下左右都有滚轮而html2canvas相当于屏幕截图那滚动区域如何显示出来是个问题
gif有点模糊但是大致功能可以看出
可复制代码在最下面
参考文章主要思路就是table既然原始高度宽度不对那你在转pdf之前就把他的宽度高度还原成真实的高度宽度然后打印成pdf最后再转成原始高度宽度。值得注意的是画布的高度宽度也要设置和table一样就行 html代码 script代码
table表上有个“导出按钮”点击就会触发handleExport函数 全部代码
html divrefmyContaineridfatherDivclassdemo-form-inlinestyleheight: calc(100% - 120px)el-tablerefworkforceTable:datatableDataborderdrop.nativedrop($event)dragover.nativeallowDrop($event)stripe:span-methodobjectSpanMethod:cell-class-nametableCellClassNamemax-height100%height100%classdemo-form-inlineidfactTableel-table-columnproptimelabel时间width70aligncenterfixed/el-table-columnel-table-column:propitem.sectorCode:labelitem.sectorNamev-foritem in sectorList:keyitem.sectorCodealigncenterel-table-column:propseat.seatId:labelseat.seatNamev-forseat in item.seatList:keyseat.seatIdaligncentermin-width102pxtemplate slot-scopescopespan:defPropseat.seatId:defTimescope.row.time:defIndexscope.$index/spanspanclassel-tag el-tag--lightdefidscope.row[seat.seatId]v-ifscope.row[seat.seatId]!-- 姓名(班组名称) --!-- {{ scope.row[seat.seatId](scope.row[teamseat.seatId]) }} --!-- 姓名 --{{ scope.row[seat.seatId] }}iclassel-tag__close el-icon-closeclickonRemovePerson(scope.$index, seat.seatId)v-ifisManual/i/span/template/el-table-column/el-table-columnel-table-column:propseat.seatId:labelseat.seatNamev-forseat in seatList:keyseat.seatIdaligncentermin-width102pxtemplate slot-scopescopespan:defPropseat.seatId:defTimescope.row.time:defIndexscope.$index/spanspanclassel-tag el-tag--lightdefidscope.row[seat.seatId]v-ifscope.row[seat.seatId]!-- 姓名(班组名称) --!-- {{ scope.row[seat.seatId](scope.row[teamseat.seatId]) }} --!-- 姓名 --{{ scope.row[seat.seatId] }}iclassel-tag__close el-icon-closeclickonRemovePerson(scope.$index, seat.seatId)v-ifisManual/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;
}
