网页生成PDF表格诡异多出空白

news2024/12/22 22:50:10

环境:

axios: 0.27.0
egg: 2.35.0
pdf-lib: 1.17.1
puppeteer-core: 17.1.3

node: 16.20.0

element-plus: 2.3.2

vue: 3.2.47

背景:

一个报告页面含有多个统计表格和描述文字,生成PDF用于下载查看,页面使用vue3+element-plus开发完成,生成PDF功能是请求node接口,node服务使用puppeteer使用无头浏览器打开报告页面,生成PDF,返回文件流用于下载

问题:

table表格出现留白,可能出现在表格体头和底出现空白,空白高度不固定,表格中的数据也存在丢失

分析:

尝试1

一般页面生成PDF出现差异是页面打印样式的影响

// 是否在指定元素中插入分页符
//   avoid避免在元素内部插入分页符,auto如果必要则在元素内部插入分页符
page-break-inside: avoid;
// 是否在指定元素后面插入分页符
//   avoid避免在元素后面插入分页符,always在元素后面插入分页符
page-break-after: always;
// 是否在指定元素前面插入分页符
//   avoid避免在元素前面插入分页符,always在元素前面插入分页符
page-break-before: always;

给表格组件类设置page-break-inside: avoid;或者page-break-inside: auto;,也给tbody tr设置,也尝试去掉所有打印样式尝试,但是无论怎么修改都没有用

尝试2

node服务支持页眉,封面等传参,所以尝试修改参数看看是否有影响,结果虽然有点影响,但是并不能使问题不出现,只是出现位置略有变化,毕竟有页眉时顶部间距会大一些

尝试3

猜想会不会是包的版本不是新的,存在一些问题,于是尝试升级puppeteer-corepdf-lib但是也没有效果

尝试4

调试查看无头浏览器打开页面时页面显示是否正常,结果发现很正常,使用浏览器的自带打印也会出现表格留白问题,因为之前做过生成PDF功能并没有出现这种问题,所有这次出现问题感觉很莫名其妙,百度也没有找到解决办法,有点绝望了,基本能尝试的都试过了

尝试5

不报希望的分析DOM元素,查看到element-plusTable使用两个独立的table实现的,即头部和内容分别使用不同的表格元素实现,难道和这个有关系?之前做的项目中没有问题,其一是不存在表格,其二存在表格使用的是ant-design-vue组件库。查看ant-design-vueTable中是使用一个table实现的(最简单的表格使用,不存在固定列等,element-plus无论是否是简单表格都是使用两个独立表格)。尝试把所有表格都使用ant-design-vueTable,哈哈哈,结果惊喜发现问题解决了!!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/779552.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用ffmpeg合并视频遇到的坑

下面以Linux环境介绍为主 1.ffmpeg可执行命令不同的环境是不同的,Linux在执行命令前还需要授权。 2.合并视频命令: 主要命令: {} -f concat -auto_convert 0 -safe 0 -i {} -y -c:v copy 坑一:其中第一个花括号替换的是可执行命令所在的…

如何计算 FPS(帧率)

FPS(Frames Per Second),每秒多少帧 在 val.py 中,需要修改参数 batch-size1 同时别忘了修改自己数据集的 yaml 文件以及训练好的 pt 文件,如下图: 修改完成后,运行 val.py,得到结果,如下图&a…

Debian部署Tomcat 注册服务并设置开机启动

目录 写在前面 1.准备工作 2.在Linux下安装Tomcat 3.Tomcat注册服务并设置开机启动 3.1.使用 rc.local 配置开机启动 3.2.使用/etc/init.d 3.3.systemd配置(通用方式) 在Debian系统上安装Tomcat并将其注册为服务以及设置开机启动的步骤。Tomcat是一…

Android Studio 提示 Failed to initialize editor问题的解决

Android Studio 从2018的版本升级到2021年的版本后,无法预览xml。我查了很久,最后发现是Gradle的版本和工具不匹配,按照开发工具的提示,升级版本即可,我的是从3.2.1升级到了4.2.2

在macOS、Windows上使用VSCode + SSH实现远程Matplotlib图形显示

简介 在 macOS 上使用 VSCode SSH 环境来显示 Matplotlib 绘制的图形需要进行一些配置。因为默认情况下, Matplotlib 的图形是无法显示在远程计算机的桌面上的。您可以通过设置 Matplotlib 使用不同的后端(backend)来实现将图形显示在本地计算机上。 第一步&…

CentOS: $‘\r‘: command not found

一、问题 在CentOS中执行脚本deploy.sh时,报错$‘\r’: command not found 原因:shell脚本是在Windows下编写,通过工具软件传输到CentOS中。而Windows下行结尾符号为\r\n ,linux下行结尾时\n,两者不同,所…

SpringBoot整合Redis和RabbitMQ练习

需求:用SpringBootRedisRabbitMQ技术,PostMan发送一个请求,存储到Redis中,并且在控制台获取打印该信息。用PostMan发送一个请求将信息存储到RabbitMQ,并且在监听该队列打印出信息。 练习1:SpringBootRedis PostMan发送一个请求,存…

【车载开发系列】AUTOSAR DemEventParameters

【车载开发系列】AUTOSAR DemEventParameters 【车载开发系列】AUTOSAR DemEventParameters 【车载开发系列】AUTOSAR DemEventParameters一. DemEventParameters的概念二. EventID三. DemEventKind1)DEM_EVENT_KIND_SWC2)DEM_EVENT_KIND_BSW 四. DemDTC…

Netty理论与实践(二) 创建http客户端 服务端

目录 开发实战1. 使用echo服务器模拟http2. netty http核心类3. 服务端4. 客户端 总结和源码参考 开发实战 1. 使用echo服务器模拟http 通过上一篇文章中的echo服务器程序来模拟一次HTTP请求。 接收消息的代码如下: public class ServerStringHandler extends S…

Acwing.003 完全背包问题(DP动态规划)

题目 有 N 种物品和一个容量是 V 的背包,每种物品都有无限件可用。 第 i 种物品的体积是 vi,价值是 wi。 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大。 输出最大价值。 输入格式 第一行两个整…

【计算机网络】简易UDP网络小程序

文章目录 1. socket函数:创建套接字2. 服务端2.1 服务端创建套接字2.2 服务端绑定2.3 字符串IP和整数IP2.4 运行服务器 3. 客户端3.1 客户端创建套接字3.2 启动客户端 4. 本地测试5. INADDR_ANY 1. socket函数:创建套接字 我们把服务封装成一个类&#…

计算机网络最基础知识介绍

OSI和TCP/IP是很基础但又非常重要的知识,很多知识点都是以它们为基础去串联的,作为底层,掌握得越透彻,理解上层时会越顺畅。今天这篇网络基础科普,就是根据OSI层级去逐一展开的。 01 计算机网络基础 01 计算机网络的分类 按照网络的作用范围:广域网(WAN)、城域网(MA…

【Kafka源码走读】Admin接口的客户端与服务端的连接流程

注:本文对应的kafka的源码的版本是trunk分支。写这篇文章的主要目的是当作自己阅读源码之后的笔记,写的有点凌乱,还望大佬们海涵,多谢! 最近在写一个Web版的kafka客户端工具,然后查看Kafka官网,…

Python基础教程:sklearn机器学习入门

1. sklearn基础介绍 sklearn(全名为scikit-learn)是一个建立在NumPy、SciPy和matplotlib等科学计算库的基础上,用于机器学习的Python开源库。它提供了丰富的工具和函数,用于处理各种机器学习任务,包括分类、回归、聚类…

线性表的顺序存储和链式存储—Python数据结构(二)

线性表 定义: 线性表的定义是描述其逻辑结构,而通常会在线性表上进行的查找、插入、删除等操作。 线性表作为一种基本的数据结构类型,在计算机存储器中映象(表示)一般有两种形式,一种是顺序映象,一种是链式映象。 线…

接口漏洞-WebService-wsdl+SOAP-Swagger+HTTP-WebPack

什么是接口? 接口就是位于复杂系统之上并且能简化你的任务,它就像一个中间人让你不需要了解详细的所有细节。像谷歌搜索系统,它提供了搜索接口,简化了你的搜索任务。再像用户登录页面,我们只需要调用我们的登录接口&am…

Jupyter 安装和使用

安装Jupyter 使用pip工具进行安装,在命令提示窗口输入命令如下: pip install jupyter notebook 使用Jupyter 在命令提示窗口输入如下命令,启动浏览器页面: jupyter notebook 修改jupyter的工作路径/存储路径 由于默认工作路…

去括号问题(C++处理)

继http://t.csdn.cn/kIcUT后的文章 题目描述 当老师不容易,尤其是当小学的老师更难:现在的小朋友做作业喜欢滥用括号。 虽然不影响计算结果,但不够美观,容易出错,而且可读性差。但又不能一棒子打死,也许他们就是将来的…

【Linux从入门到精通】进程的控制(进程退出+进程等待)

本篇文章主要讲述的是进程的退出和进程等待。希望本篇文章的内容会对你有所帮助。 文章目录 一、fork创建子进程 1、1 在创建子进程中操作系统的作用 1、2 写时拷贝 二、进程终止 2、1 常见的进程退出 2、2 进程的退出码 2、2、1 运行结果正确实例 2、2、2 运行结果不正确实例…

防御第二天-防火墙演示实验

1.上课思维导图 2.防火墙演示实验 防火墙FW1&#xff1a;原用户名&#xff1a;admin 原密码&#xff1a;Admin123 配地址&#xff1a;<USG6000V1>sy [USG6000V1]int g0/0/0 [USG6000V1-GigabitEthernet0/0/0]ip add 192.168.18.2 24 打开所有权限[USG6000V1-Gig…