环境:
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-core
和pdf-lib
但是也没有效果
尝试4
调试查看无头浏览器打开页面时页面显示是否正常,结果发现很正常,使用浏览器的自带打印也会出现表格留白问题,因为之前做过生成PDF功能并没有出现这种问题,所有这次出现问题感觉很莫名其妙,百度也没有找到解决办法,有点绝望了,基本能尝试的都试过了
尝试5
不报希望的分析DOM元素,查看到element-plus
的Table
使用两个独立的table
实现的,即头部和内容分别使用不同的表格元素实现,难道和这个有关系?之前做的项目中没有问题,其一是不存在表格,其二存在表格使用的是ant-design-vue
组件库。查看ant-design-vue
的Table
中是使用一个table
实现的(最简单的表格使用,不存在固定列等,element-plus
无论是否是简单表格都是使用两个独立表格)。尝试把所有表格都使用ant-design-vue
的Table
,哈哈哈,结果惊喜发现问题解决了!!