Html To Pdf

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

下载

img标签必须置于内合法位置才能渲染，错误嵌套（如放中）或缺失src、alt等必要属性会导致图像不显示、可访问性失效或布局错乱；src路径错误、大小写敏感及协议缺失是“图片不显示”的主因；alt为强制语义字段，缺失将致屏幕阅读器跳过、seo丢失图意、加载失败留白；width/height属性影响布局稳定性，未设置会引发cls偏移。

img 标签本身不依赖特定文档结构，只要出现在 内合法位置就能渲染，但错误嵌套或缺失必要属性会导致图像不显示、可访问性失效或布局错乱。

必须放在 里，不能直接塞进

浏览器只在渲染 时解析 img 标签。如果误写成：

  @@##@@

图像完全不会出现，控制台也无报错——它被忽略，不是错误，只是无效位置。

• <img src="logo.png" alt="Logo"> 只能作为 的子元素或其合法后代（如 <div>、<code><section></section>、<p></p> 内）
• 可以放在 <figure></figure> 里配合 <figcaption></figcaption>，这是语义化推荐做法
• 不能包裹文字内容（它是自闭合标签），写成 <img>xxx 会触发 HTML 解析错误，后续内容可能错位

src 路径写错，图像就“消失”得毫无提示

90% 的“图片不显示”问题出在 src 值无效。它不是占位符，而是实际 HTTP 请求地址。

• 相对路径以当前 HTML 文件为基准：若 HTML 在 /pages/about.html，图在 /assets/icon.svg，就得写 src="../assets/icon.svg"
• 根相对路径（src="/assets/icon.svg"）从域名根开始找，本地双击打开 HTML 时会失败（file:// 协议下 / 指向磁盘根目录）
• 网络图片必须带协议或协议相对 URL：src="https://cdn.example.com/pic.jpg" 或 src="//cdn.example.com/pic.jpg"；漏掉 https:// 就变成相对路径，大概率 404
• 大小写敏感：Linux 服务器上 photo.JPG ≠ photo.jpg，开发时用 macOS/Windows 测试容易漏掉这点

alt 不是“可选装饰”，而是强制语义字段

不写 alt 不报错，但会让屏幕阅读器跳过该图像、SEO 丢失图意理解、图片加载失败时页面留白——这三者都算线上事故。

• 描述性内容：alt="穿蓝衬衫的工程师正在调试服务器机柜"，不是 "image123" 或空字符串
• 纯装饰图才用 alt=""（注意是空字符串，不是省略）
• 如果图像含关键信息（如验证码、图表数据），alt 必须传达等效含义，不能只写“图表”
• 搜索引擎把 alt 当正文索引，和标题、段落文本同等权重

width/height 不只是样式，还影响布局稳定性

没设宽高时，浏览器不知道图像尺寸，先占位 0×0，等图片加载完再重排布局——导致文字“跳动”，尤其在移动端明显。

• 写死像素值：width="300" height="200" 最简单，但响应式场景下需配合 CSS 覆盖
• 现代做法是用 CSS 控制尺寸，但依然建议保留 width 和 height 属性（哪怕只是占位）：它们提供长宽比，让浏览器提前预留空间
• 如果图像原始尺寸是 600×400，却只写 width="300"，浏览器无法推断高度，仍会重排
真正容易被忽略的，是 src 路径解析逻辑和 alt 的语义责任——它们不报错，却在用户看不见的地方持续制造体验裂痕。