问题：
前端 - puppeteer生成pdf与网页显示为什么不一致？
纪佐
用puppeteer生成网页的pdf，网页排版用的div（float）>table ，网页看是正常的，生成pdf就多了一点空隙
网页正常显示
pdf显示多了空白间隙
finderror.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { 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; } } </style> </head> <body> <div class="wrapper wrapper-h"> <div class="vertical w-v"> <table> <tr> <td></td> </tr> <tr> <td><span></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td></td> </tr> </table> </div> <div class="vertical w-v"> <table> <tr> <td></td> </tr> <tr> <td><span></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td></td> </tr> </table> </div> <div class="vertical w-v"> <table> <tr> <td></td> </tr> <tr> <td><span></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td></td> </tr> </table> </div> <div class="vertical w-v"> <table> <tr> <td></td> </tr> <tr> <td><span></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td></td> </tr> </table> </div> <div class="vertical w-v"> <table> <tr> <td></td> </tr> <tr> <td><span></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td></td> </tr> </table> </div> <div class="vertical w-v"> <table> <tr> <td></td> </tr> <tr> <td><span></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td><span class="down_line"></span></td> </tr> <tr> <td></td> </tr> </table> </div></div> </body></html>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与网页预览一致
共有1个答案
阚原
原因不详！！
解决办法：修改.w-v的宽度为272，就不会出现该问题，但是与想要的宽度效果就不一致了（有毒��）
类似资料：
-
上面是vite.config.ts的别名配置 1.测试过别名注释在运行项目会报路径找不到，加上注释页面正常渲染（@符号） import App from "@/App.vue";
-
本文向大家介绍Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法，包括了Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法的使用技巧和注意事项，需要的朋友参考一下 项目地址：https://github.com/PythonerKK/django-generate-pdf/tree/master 这个demo实现了通过用户输入自己的个人信息生成一份简历pdf，来
-
本文向大家介绍Puppeteer 爬取动态生成的网页实战，包括了Puppeteer 爬取动态生成的网页实战的使用技巧和注意事项，需要的朋友参考一下 Puppeteer 相关介绍与安装不过多介绍，可通过以下链接进行学习 一、Puppeteer 开源地址 英文文档 中文社区 二、爬取动态网页 1. 需求 首先，了解下我们的需求: 爬取zoomcharts 文档中 Net Chart 目录下所有访问连接
-
问题内容： 我是新使用nodejs函数和puppeteer。以前我使用wkhtmltopdf，但目前它的选项非常差。 因此，我的想法是从带有第一个封面的html生成一个pdf（具有全A4宽度/高度的图像），因为页脚是从index.js生成的，所以无法将其隐藏在页面的第一页上PDF。 我的问题是，有什么方法可以找到第一个页脚并将其从索引功能中隐藏起来吗？ 谢谢！ 问题答案： 目前有多个错误，使它不可
-
问题内容： 我想在地图上显示许多不同的标签，所以我在面板中使用空布局，并为每个标签调用setLocation。但是由于某种原因，标签没有显示。如果删除pan.setLayout（null），则标签将出现在面板的顶部中央。为什么null布局不能与setPosition一起使用？ 问题答案： 这是绝对定位（或布局）的问题。它要求您设置所有组件的大小，否则它们将保留为默认的零大小，并且不会显示。这就是为
-
本文向大家介绍Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题，包括了Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题的使用技巧和注意事项，需要的朋友参考一下 项目地址：https://github.com/PythonerKK/django-generate-pdf/tree/master 这个demo实现了通过用户输入自己的个人信息生成一份简历pdf