当前位置: 首页 > news >正文

使用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表的水平和竖直有滚动条导致显示不全(或者有空白)

结果&#xff1a; 业务&#xff1a;将页面右侧的table打印成想要的格式的pdf&#xff0c;首先遇到的问题是table表上下左右都有滚轮而html2canvas相当于屏幕截图&#xff0c;那滚动区域如何显示出来是个问题&#xff1f; gif有点模糊&#xff0c;但是大致功能可以看出 可复制…...

EDID详解

文章目录 字节含义一些概念YCC位 文章目录 字节含义一些概念YCC位 字节含义 EDID通常由128个字节组成&#xff0c;这些字节提供了关于显示器的各种详细信息。以下是EDID中每个字节位表示的一般含义&#xff1a; Header&#xff08;头部&#xff09;: 字节0: Header&#xff…...

浅谈云原生

目录 1. 云原生是什么&#xff1f; 2. 云原生四要素 2.1 微服务 2.2 容器化 2.3 DevOps 2.4 持续交付 3. 具体的云原生技术有哪些&#xff1f; 3.1 容器 (Containers) 3.2 微服务 (Microservices) 3.3 服务网格 (Service Meshes) 3.4 不可变基础设施 (Immutable Inf…...

【K8S】Kubernetes

mesos apache基金会&#xff0c;后来是推特公司 mesos分布式资源管理框架2019淘汰 marathon 容器编排框架 用来调度、编排运行的常驻服务 mesos marathon 容器管理 k8s容器或云平台两种趋势&#xff08;工资好&#xff09; 1.K8s是什么 K8s全称为 Kubernetes&#xff…...

面试题 01.01. 判定字符是否唯一

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;面试题 01.01. 判定字符是否唯一 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 遍历计数即可。 解题代码&#xff1a; class Solution { public:bool isUnique(string astr) {if(astr.l…...

C++(Qt)软件调试---linux使用dmesg定位程序崩溃位置(14)

C(Qt)软件调试—linux使用dmesg定位程序崩溃位置&#xff08;14&#xff09; 文章目录 C(Qt)软件调试---linux使用dmesg定位程序崩溃位置&#xff08;14&#xff09;1、前言2、ELF文件3、常用工具4、使用dmesg定位异常位置1.1 异常发生在可执行程序中1.2 异常发生在动态库中 1、…...

38 WEB漏洞-反序列化之PHPJAVA全解(下)

目录 Java中的API实现序列化和反序列化演示案例WebGoat_Javaweb靶场反序列化测试2020-网鼎杯-朱雀组-Web-think java真题复现 文章参考&#xff1a; https://www.cnblogs.com/zhengna/p/15737517.html https://blog.csdn.net/MCTSOG/article/details/123819548 ysoserial生成攻…...

LeetCode 面试题 10.10. 数字流的秩

文章目录 一、题目二、C# 题解 一、题目 假设你正在读取一串整数。每隔一段时间&#xff0c;你希望能找出数字 x 的秩(小于或等于 x 的值的个数)。请实现数据结构和算法来支持这些操作&#xff0c;也就是说&#xff1a; 实现 track(int x) 方法&#xff0c;每读入一个数字都会调…...

Vue3项目上线打包优化

之前整理过 Vue2项目上线打包优化&#xff0c;在vue3中&#xff0c;使用vite打包&#xff0c;配置稍微改了改。 1 开启gzip压缩 1.1 安装依赖 npm i vite-plugin-compression -D1.2 vite.config.ts 配置 import viteCompression from vite-plugin-compressionexport defaul…...

【算法题】2525. 根据规则将箱子分类

题目&#xff1a; 给你四个整数 length &#xff0c;width &#xff0c;height 和 mass &#xff0c;分别表示一个箱子的三个维度和质量&#xff0c;请你返回一个表示箱子 类别 的字符串。 如果满足以下条件&#xff0c;那么箱子是 “Bulky” 的&#xff1a; 箱子 至少有一个…...

python字典

字典 字典定义创建字典 字典定义 字典是python语言中唯一的映射类型。这种映射类型由键&#xff08;key&#xff09;和值&#xff08;value&#xff09;组成&#xff0c;是“键值对”的无序可变序列 定义字典时&#xff0c;每个元组的键和值用冒号隔开&#xff0c;相邻元素用…...

thinkphp队列的使用?

1.安装队列依赖 由于框架版本原因可以选择适合的版本 composer require topthink/think-queue 由于我是tp框架5.1的&#xff0c;所以选择了think-queue 1.1.6 composer require topthink/think-queue 1.1.6 判断安装成功 php think queue:work -h image.png 2.配置文件…...

【数据结构】排序--归并排序

目录 一 基本思想 二 代码实现 三 非递归归并排序 一 基本思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide and Conquer&#xff09;的一个非常典型的应用。将已有序的子序列合并&#xff…...

批量修改视频尺寸:简单易用的视频剪辑软件教程

如果你需要批量修改视频尺寸&#xff0c;同时保持高质量的画质&#xff0c;那么“固乔剪辑助手”这款软件是你的不二之选。下面就是如何使用这款软件进行批量修改视频尺寸的详细步骤。 1. 首先&#xff0c;你需要在浏览器中进入“固乔科技”的官网&#xff0c;然后下载并安装“…...

四川云汇优想:短视频矩阵运营方案

短视频矩阵运营方案是为了提高短视频平台的用户黏性和活跃度&#xff0c;从而增强用户粘性和平台的商业价值而制定的。下面四川百幕晟小编将对短视频矩阵运营方案进行详细的介绍和分析。 首先&#xff0c;短视频矩阵运营方案要注重用户精细化运营。通过用户画像和兴趣标签&…...

vue中如何获取到当前位置的天气

要在Vue中获取当前位置的天气&#xff0c;您需要使用浏览器的Geolocation API来获取设备的地理位置&#xff0c;并使用第三方的天气API来获取天气数据。 下面是一般的步骤&#xff1a; 在Vue项目中安装axios库&#xff0c;用于发送HTTP请求。 npm install axios 创建一个新的…...

C++三角函数和反三角函数

当涉及到三角函数和反三角函数时&#xff0c;C提供了一组函数来执行这些计算。以下是C中常用的三角函数和反三角函数的详细解释和示例说明&#xff1a; sin函数&#xff08;正弦函数&#xff09;&#xff1a; 函数原型&#xff1a;double sin(double x);功能&#xff1a;计算给…...

Linux篇 五、Ubuntu与Linux板卡建立NFS服务

Linux系列文章目录 一、香橙派Zero2设置开机连接wifi 二、香橙派Zero2获取Linux SDK源码 三、香橙派Zero2搭建Qt环境 四、Linux修改用户名 文章目录 Linux系列文章目录前言一、连接到局域网互ping测试 二、安装NFS服务配置NFS更新exports配置三、板卡安装NFS客户端四、板卡临时…...

通讯协议学习之路:IrDA协议协议理论

通讯协议之路主要分为两部分&#xff0c;第一部分从理论上面讲解各类协议的通讯原理以及通讯格式&#xff0c;第二部分从具体运用上讲解各类通讯协议的具体应用方法。 后续文章会同时发表在个人博客(jason1016.club)、CSDN&#xff1b;视频会发布在bilibili(UID:399951374) 序、…...

互联网摸鱼日报(2023-10-20)

互联网摸鱼日报(2023-10-20) 博客园新闻 OPPO让折叠机超越直板旗舰成为可能 特斯拉的“大空头”&#xff0c;是马斯克那张嘴 逃避内卷的年轻人&#xff0c;盯上了老年大学的音乐课 理想市值超蔚来1倍&#xff0c;一场属于增程式的胜利 补足折叠屏影像短板&#xff0c;OPPO…...

COMSOL数据可视化避坑指南:如何用SciPy的griddata处理不规则网格数据?

COMSOL数据可视化避坑指南&#xff1a;如何用SciPy的griddata处理不规则网格数据&#xff1f; 当你从COMSOL导出电场、温度场或其他物理场数据时&#xff0c;是否遇到过这样的困扰&#xff1a;明明在COMSOL中看起来光滑连续的场分布&#xff0c;导出到MATLAB或Python中绘制时却…...

OpenMV串口数据收发实战:如何与Arduino/STM32稳定通信并解析指令

OpenMV与微控制器串口通信实战&#xff1a;从基础协议到工业级稳定性优化 在智能机器人、自动化检测设备等嵌入式视觉系统中&#xff0c;OpenMV常作为"视觉传感器"与主控微控制器&#xff08;如Arduino/STM32&#xff09;协同工作。我曾参与过一个AGV小车项目&#x…...

BGE-Large-Zh前沿探索:量子计算语义编码实验

BGE-Large-Zh前沿探索&#xff1a;量子计算语义编码实验 引言 量子计算正在重新定义计算的边界&#xff0c;而自然语言处理作为人工智能的核心领域&#xff0c;也迎来了与量子技术融合的历史性机遇。我们进行了一项创新实验&#xff1a;将BGE-Large-Zh这一强大的语义编码模型…...

论计算机科学的本质是什么?编程么?

计算机科学的本质不是编程。编程只是实现计算机科学思想的工具和手段&#xff0c;而非其内核。计算机科学的核心是“计算”与“问题求解”计算机科学&#xff08;Computer Science, CS&#xff09;本质上是一门研究信息与计算的理论基础&#xff0c;以及如何通过算法高效、可靠…...

告别setData!用mobx-miniprogram+miniprogram-computed重构你的小程序状态管理(保姆级避坑指南)

重构小程序状态管理&#xff1a;mobx-miniprogram与miniprogram-computed实战指南 如果你正在开发一个功能逐渐复杂的中大型微信小程序&#xff0c;大概率已经遇到了这样的困境&#xff1a;页面间状态共享越来越混乱&#xff0c;setData调用遍布各个角落&#xff0c;视图更新性…...

腾讯开源翻译大模型HY-MT1.5-7B镜像使用教程:新手快速入门

腾讯开源翻译大模型HY-MT1.5-7B镜像使用教程&#xff1a;新手快速入门 你是否曾为寻找一个既强大又好用的翻译工具而烦恼&#xff1f;无论是阅读外文资料、处理多语言客服&#xff0c;还是开发一个需要实时翻译的应用&#xff0c;找到一个靠谱的翻译引擎总是关键一步。今天&am…...

全面只使用sessionid来验证登录-----客户端只保留sessionid

虽然说sessionid 也是可以伪造的&#xff0c;可以快速发送伪造的sessionid,但是因为sessionid是32位的随机字符串&#xff0c;暴力破解需要几亿年&#xff0c;安全性比user_id1,user_id2 高得多。不过一个有意思的事情是&#xff1a;如果我把user_id1改成 user_id32位随机字符串…...

Netty实战:从零搭建一个高性能聊天室(附完整源码)

Netty实战&#xff1a;从零构建高性能聊天室的架构设计与实现 引言&#xff1a;为什么选择Netty构建实时通讯系统&#xff1f; 当我们需要开发一个支持高并发的实时聊天应用时&#xff0c;传统IO模型往往会遇到性能瓶颈。我曾参与过一个在线教育平台的即时通讯模块开发&#xf…...

Super IO:Blender文件操作效率革命,实现300%工作流提速

Super IO&#xff1a;Blender文件操作效率革命&#xff0c;实现300%工作流提速 【免费下载链接】super_io blender addon for copy paste import / export 项目地址: https://gitcode.com/gh_mirrors/su/super_io 在3D设计领域&#xff0c;文件导入导出的繁琐操作常常成…...

效率提升:基于快马平台实现openclaw windows部署的自动化与优化

最近在团队里负责优化openclaw在Windows环境的部署流程&#xff0c;发现传统手动部署方式存在不少效率瓶颈。经过在InsCode(快马)平台上的实践&#xff0c;我们实现了一套自动化部署方案&#xff0c;效果提升明显。这里分享几个关键优化点&#xff1a; 全流程一键化部署 过去部…...