puppeteer生成pdf与网页显示为什么不一致？-灵析社区

用puppeteer生成网页的pdf，网页排版用的div（float）>table ，网页看是正常的，生成pdf就多了一点空隙 网页正常显示  pdf显示多了空白间隙  finderror.html Document * { margin: 0; padding: 0; } /* A4-纵向 */ .wrapper-v { /* 边距为0 */ width: 794.12px; /* 边距为5cm,对应需减去边距 */ width: 756.305px; /* min-height: 1090px; */ /* width: 1075px; height: 1568px; */ } /* A4-横向 */ .wrapper-h { /* width: 1090px; min-height: 794px; */ /* 边距为0 */ width: 1123.11px; /* 边距为0.5cm,对应需减去左右边距 */ width: 1085.295px; /* width: 1569px; height: 1075px; */ } .wrapper { /* display: flex; flex-direction: column; align-items: center; clear: both; */ /* 使用样式控制分页 */ /* margin-left: 25px; */ /* 影响puppeteer分页 */ /* display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; */ box-sizing: border-box; /* 控制在打印预览中的左边距，设置为0则贴边，上边距在page里设置 */ /* padding: 15px 15px; */ /* padding-top: 15px; */ /* padding-left: 15px; */ padding: 1px; /* clear: both; */ overflow: hidden; /* 使用样式控制分页 */ } .w-h, .w-v { float: left; /* page-break-inside: avoid; */ } /* 纵向-外框 */ .w-v { /* width: 266px; height: 361px; */ width: 272.27px; height: 369.07px; /* 1cm = 39.862px */ /* width: 287.006px; height: 389.053px; */ /* 1cm=41.192px */ /* width: 298.742px; height: 404.962px; */ } /* 横向-外框 */ .w-h { /* width: 382px; height: 235px; */ width: 391.01px; height: 240.13px; /* width: 392px; height: 241px; */ } .wrapper-v .w-v:nth-of-type(4n) { /* margin-bottom: 180px; */ page-break-after: always; } .wrapper-h .w-v:nth-of-type(6n) { /* margin-bottom: 120px; */ page-break-after: always; } .w-v table { width: 100%; height: 100%; border-collapse: collapse; border: 1px solid black; page-break-inside: avoid; } .w-v table tr:first-of-type { font-weight: bolder; font-family: "仿宋"; height: 32px; line-height: 32px; text-align: center; font-size: 15px; letter-spacing: 8px; } .w-v table tr:nth-of-type(2) { height: 208px; text-align: center; } .w-v table tr:nth-of-type(3), .w-v table tr:nth-of-type(4), .w-v table tr:nth-of-type(5) { height: 28px; } .w-v table tr:nth-of-type(6) { height: 36px; text-align: center; font-family: fangsong; font-weight: bolder; } .w-v table tr:nth-of-type(2) td .w-v table tr:nth-of-type(3) td, .w-v table tr:nth-of-type(4) td, .w-v table tr:nth-of-type(5) td { font-size: 16px; text-align: center; } .w-v table tr:nth-of-type(3) td, .w-v table tr:nth-of-type(4) td, .w-v table tr:nth-of-type(5) td { font-size: 14px; line-height: 16px; text-align: center; } .w-v table tr:nth-of-type(2) td { /* width: 260px; */ line-height: 30px; font-family: "Microsoft YaHei"; font-size: 26px; /* 使用puppeteer时，竖向文字不起效果 */ /* writing-mode: vertical-lr; */ /* letter-spacing: 5px; */ } /* 解决使用puppeteer时，竖向文字不起效果 */ .w-v table tr:nth-of-type(2) td span { display: inline-block; width: 25px; line-height: 32px; } /* .w-v table tr:nth-of-type(3) td, .w-v table tr:nth-of-type(4) td{ vertical-align: middle; } */ .w-v table tr:nth-of-type(5) td { font-size: 15px; } @media print { body { margin: 0; padding: 0; } @page { /* margin: 1cm -0.25cm; */ /* margin: 0cm; */ /* 此处设置size 影响pdf横向纸张生成 */ /* size: a4; */ margin: 0.5cm; scale: 1; /* 设置打印上边距 */ /* margin-top: 25px; */ } body { /* 页面背景色 通过js控制 */ /* Chrome、Safari 等 webkit 浏览器内核 */ -webkit-print-color-adjust: exact; /* 火狐 */ print-color-adjust: exact; color-adjust: exact; } .wrapper { margin: 0; padding: 0; } } createPdf.js const puppeteer = require("puppeteer"); const path = require("path"); (async function () { const browser = await puppeteer.launch({ headless: true, }); const page = await browser.newPage(); await page.goto( "file:///G:/finderror.html", { timeout: 0, } ); await page.waitFor(5000); await page.pdf({ scale: 1, printBackground: true, /* ————————————更改纸张方向及颜色———————————————— */ // 设置纸张是否为横向 landscape: true, /* ————————————更改纸张方向及颜色———————————————— */ format: "A4", path: path.join(__dirname, "./测试.pdf"), }); await browser.close(); })(); 尝试： * 与collapse无关 * 与添加page-break-after:always无关 希望获得的结果： 生成pdf与网页预览一致