会，主流HTML→PDF工具（如Puppeteer、wkhtmltopdf、WeasyPrint）能识别display: none并跳过渲染；但visibility: hidden仍占空间，@media print需显式启用--print-media-type参数，异步内容需等待DOM更新。
用 display: none 隐藏元素后转 PDF 会生效吗？
会，但仅限于大多数主流 HTML → PDF 工具（如 Puppeteer、wkhtmltopdf、WeasyPrint）。它们基于浏览器渲染引擎或类浏览器环境，能识别并跳过 display: none 的元素——包括其子节点、占位空间和事件绑定。但注意：visibility: hidden 不行，它仍保留布局空间，PDF 中会留白。
Puppeteer 中隐藏元素再生成 PDF 的典型写法
直接在页面加载后、PDF 生成前注入样式或修改 DOM，比在原始 HTML 里硬写更灵活，尤其适合动态控制。
- 推荐在
page.evaluate()中统一处理，避免样式未生效就触发 PDF 导出 - 用
document.querySelectorAll()精准选中，比如隐藏所有带data-pdf-ignore属性的元素：await page.evaluate(() => { document.querySelectorAll('[data-pdf-ignore]').forEach(el => el.style.display = 'none'); }); - 若需隐藏整个区域（如页眉/页脚/调试按钮），优先加 class（如
pdf-hidden），再通过document.styleSheets注入临时样式，避免逐个操作 DOM 性能损耗
wkhtmltopdf 下 @media print 不起作用？
默认情况下 wkhtmltopdf 不触发 @media print，必须显式启用：--print-media-type 参数。否则即使写了 @media print { .header { display: none; } }，PDF 里照样显示。
- 命令行中务必加上：
wkhtmltopdf --print-media-type input.html output.pdf - 如果用 Node.js 封装（如
pdf包），检查是否透传了该参数；部分封装库默认关闭此选项 -
@media screen对 PDF 完全无效，不要混用
隐藏后内容还出现在 PDF 里的三个常见原因
不是 CSS 失效，而是时机或机制没对上：
立即学习“前端免费学习笔记（深入）”；
- 元素是异步加载的（如 Vue/React 组件、
fetch后插入），Puppeteer 的page.pdf()可能执行太早——改用page.waitForFunction()等待目标元素存在且可见状态已更新 - 用了
opacity: 0或transform: scale(0)，这些不触发“隐藏语义”，PDF 渲染器照常绘制 - CSS 是内联
style属性写的，但被更高优先级的外部样式覆盖——打开 PDF 生成时的临时 HTML 快照，用浏览器 DevTools 检查 computed style 是否真为display: none
[data-pdf-ignore] 这种属性选择器可能被忽略，换成 class 更稳妥。真正难搞的不是“怎么藏”，是“藏得干净又可控”。 
