Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

内嵌会失效，因浏览器解析时强制闭合并移出，导致dom结构变为内容，使css选择器p > div失效、js查询返回null、padding/margin无效，w3c验证器明确报错“element div not allowed as child of element p”。

浏览器不报错，但结构已悄悄变——所有看似“能渲染出来”的非法嵌套，都在破坏语义、干扰 CSS 选择器、让 JS 查询失效，甚至导致 SSR hydration 失败。

为什么 <p></p> 里放 <div> 会失效 <p>不是样式没生效，是 DOM 根本没按你写的建。浏览器解析到 <code><p></p> <div>xxx</div>

时，会在 <div> 开始前就闭合 <code><p></p>，实际生成：<p></p> <div>xxx</div> <p></p>。

• document.querySelector('p > div') 永远返回 null
• p { padding: 1em; } 对 <div> 完全无效（它已不在 <code><p></p> 内）
• W3C 验证器明确报错：Element div not allowed as child of element p
• 用 display: inline 或 inline-block 也绕不过——HTML 解析阶段就已完成修正，CSS 是后置操作

<ul></ul> 和 <ol></ol> 下只能直接放 <li>

写成 <ul><div class="item">text</div></ul> 是非法的。浏览器会把 <div> 移出列表，变成兄弟节点，<code><ul></ul> 内部只剩空壳。

• ul li 这类选择器全部失配，必须改成 ul + div.item（脆弱且语义丢失）
• 屏幕阅读器无法识别这是列表，可访问性降级
• <li> 内可以自由嵌套 <div>、<code><p></p>、<ul></ul>，但必须确保它们紧贴在 前——中间加空行或注释，某些解析器会误判为 已结束
• 想包裹多段内容？用 <li><article>...</article></li>，别把 <div> 直接塞进 <code><ul></ul>

  <h1></h1>～<h6></h6> 和 <dt></dt> 只接受行内内容

  这些标签的内容模型是 phrasing content，不允许任何块级元素。写 <h2><div>title</div></h2>，浏览器实际解析为：<h2></h2> <div>title</div>。

  • <h2></h2> 变成空标签，所有绑定在其上的样式（如 margin-bottom）失效
  • el.innerHTML = '<h4><div>x</div></h4>' 动态插入同样触发自动修正
  • 需要标题带结构？用 <h3 class="title">主标题</h3> <div class="meta">副标题</div>，或语义更准的 <header></header> 包裹
  • <dt></dt> 同样禁止 <p></p>、<ul></ul>；但 <dd></dd> 可以合法嵌套块级元素

  <table> 必须显式包含 <code><tbody><p>哪怕 <code><table><tr><td>A</td></tr></table> 能显示，浏览器也会静默补 <tbody>，但补的位置不可控，导致 DOM 不一致。 <ul><li> <code>tr:first-child 可能选中的是 <tbody>，而非预期的 <code><tr> <li> <code>table.tBodies[0].rows 在 SSR 和客户端可能指向不同层级

• Bootstrap Table 等框架依赖显式 <tbody> 做样式隔离，漏写则边框/悬停失效 <li><code><tr> 只能作为 <code><table>、<code><thead>、<code><tbody>、<code><tfoot> 的直接子元素——放在 <code><div> 里等于被丢弃 <p>真正难的不是记住哪些不能嵌，而是看懂 DevTools Elements 面板里那个“被修正后的 DOM”——它才是你代码实际运行的结构，而不是你写的源码。</p> </div>