环境：

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，哈哈哈，结果惊喜发现问题解决了！！