当前位置: 首页 > 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…...

Vue3+Element Plus+Sortable.js:构建可定制化表格拖拽配置中心

1. 为什么需要表格拖拽配置中心 后台管理系统中最常见的需求之一就是表格展示数据。但不同用户对表格的展示需求往往不同&#xff1a;产品经理可能更关注日期和状态字段&#xff0c;运营人员则更看重用户行为和转化数据。传统解决方案是开发多个固定表格页面&#xff0c;但这会…...

OpCore-Simplify:如何将黑苹果EFI配置从3小时缩短到15分钟?

OpCore-Simplify&#xff1a;如何将黑苹果EFI配置从3小时缩短到15分钟&#xff1f; 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 在开源系统定制领域…...

Qwen-Ranker Pro快速部署:Windows WSL2环境下Streamlit兼容性方案

Qwen-Ranker Pro快速部署&#xff1a;Windows WSL2环境下Streamlit兼容性方案 1. 环境准备与系统要求 在Windows WSL2环境中部署Qwen-Ranker Pro需要确保系统满足以下基本要求&#xff1a; 硬件要求&#xff1a; 内存&#xff1a;至少8GB RAM&#xff08;推荐16GB以上&…...

Kandinsky-5.0-I2V-Lite-5s企业实操:单任务串行设计规避显存过载,保障服务稳定性

Kandinsky-5.0-I2V-Lite-5s企业实操&#xff1a;单任务串行设计规避显存过载&#xff0c;保障服务稳定性 1. 产品概述 Kandinsky-5.0-I2V-Lite-5s是一款轻量级图生视频模型&#xff0c;专为企业级稳定运行而优化。只需上传一张首帧图片&#xff0c;再补充运动或镜头描述&…...

SlimSAS连接器在高密度存储系统中的关键应用与优化策略

1. SlimSAS连接器为何成为高密度存储的"黄金搭档"&#xff1f; 第一次接触SlimSAS连接器是在去年部署全闪存阵列时。当时机柜里密密麻麻的线缆让我头疼不已&#xff0c;直到工程师拿出这个火柴盒大小的连接器&#xff0c;我才意识到高密度布线的革命真的来了。SlimS…...

用ZYNQ PS-SPI给Flash测个速:华邦W25Q80在25MHz时钟下的真实读写性能报告

ZYNQ PS-SPI Flash性能深度评测&#xff1a;华邦W25Q80在25MHz时钟下的极限挖掘 当我们需要在嵌入式系统中选择一款Flash存储器时&#xff0c;数据手册上的理论参数往往无法反映真实应用场景下的性能表现。本文将基于Xilinx ZYNQ平台的PS-SPI接口&#xff0c;对华邦W25Q80 Flas…...

SenseVoice-small实战教程:导出SRT/VTT字幕文件用于Premiere剪辑

SenseVoice-small实战教程&#xff1a;导出SRT/VTT字幕文件用于Premiere剪辑 你是不是经常遇到这样的烦恼&#xff1f;录了一段视频&#xff0c;或者拿到一段会议录音&#xff0c;想要给它配上精准的字幕&#xff0c;却发现自己要花几个小时去听写、校对、打时间轴&#xff1f…...

像素史诗惊艳效果展示:10份高质量研报生成过程与成品对比

像素史诗惊艳效果展示&#xff1a;10份高质量研报生成过程与成品对比 1. 像素史诗&#xff1a;当AI研究遇上像素艺术 在数字内容创作领域&#xff0c;一款名为像素史诗(Pixel Epic)的工具正在重新定义研究报告的生成方式。这款基于AgentCPM-Report大模型构建的智能终端&#…...

如何快速配置Windows三指拖动功能:ThreeFingerDragOnWindows完整指南

如何快速配置Windows三指拖动功能&#xff1a;ThreeFingerDragOnWindows完整指南 【免费下载链接】ThreeFingersDragOnWindows Enables macOS-style three-finger dragging functionality on Windows Precision touchpads. 项目地址: https://gitcode.com/gh_mirrors/th/Thre…...

从Prompt到成稿|像素剧本圣殿输入剧情大纲→输出标准剧本全流程

从Prompt到成稿&#xff5c;像素剧本圣殿输入剧情大纲→输出标准剧本全流程 1. 工具介绍&#xff1a;像素剧本圣殿 像素剧本圣殿是一款基于Qwen2.5-14B-Instruct大模型深度优化的专业剧本创作工具。它将先进的AI文本生成能力与独特的8-Bit复古视觉风格相结合&#xff0c;为编…...