如何将 HTML 转换为 PDF
从 HTML 创建 PDF 适合生成发票、报告、信件、证书 · 任何需要用 CSS 控制版式但以 PDF 形式分发的文档。
如何将 HTML 转换为 PDF
- 粘贴您的 HTML· 在编辑器中输入您的 HTML 代码，包括内联 CSS 或
<style>标签。代码可以包含完整的页面结构，含页眉、表格、图片和样式。 - 预览渲染· 实时预览会在您输入时精确显示 PDF 的渲染效果。调整 HTML 和 CSS 直到渲染符合您的预期。
- 生成并下载· 点击生成按钮在浏览器中创建 PDF，然后立即下载。
您可以创建什么
- 发票和收据· 带公司品牌、商品行和总计的结构化表格
- 报告· 含标题、段落、图表和数据表的格式化文档
- 证书· 带自定义字体、边框和居中文字的样式化版式
- 信件· 带信头、正文和签名区的专业通信
- 简历· 精美的版式导出为干净的 PDF 用于求职
PDF 输出的样式建议
使用内联样式或 <style> 标签· 外部样式表不会被加载。将所有 CSS 放在元素的内联样式中，或在 HTML 的 <style> 块中。
定义页面边距· 在 CSS 中使用 @page { margin: 20mm; } 控制 PDF 中内容周围的空间。
使用适合打印的单位· 在 PDF 中 mm、cm 和 pt 比 px 或 rem 更可预测。用 mm 设置需要匹配物理尺寸的边距和间距。
避免依赖视口的版式· 百分比宽度和固定像素宽度效果最好。视口相关单位（vw、vh）在 PDF 中可能不如预期。
小贴士
- 先预览· 始终在生成前检查实时预览。迭代 HTML 比每次都重新生成 PDF 快得多。
- 图片使用 base64· 将图片转换为 base64 data URI，以保证它们包含在 PDF 中。外部 URL 可能因 CORS 限制而失败。
- 保持简单· 复杂的 CSS 版式（嵌套网格、层叠的定位元素）可能无法完美渲染。更简单的版式产生更可靠的 PDF。
- 测试分页· 对多页文档，使用
page-break-before: always控制新页从哪里开始。
常见问题
PDF 会保留我的 CSS 样式吗？
会。转换器会使用您应用的 CSS 渲染 HTML，包括颜色、字体、边距和版式。PDF 看起来像渲染后的网页，而非原始代码。
可以在 PDF 中包含图片吗？
可以。使用 base64（data URI）图片可获得最可靠的结果。外部图片 URL 若可访问且 CORS 兼容也可能有效。
我的 HTML 会发送到服务器吗？
不会。转换完全在您的浏览器中进行。您的代码和生成的 PDF 从不离开您的设备。
支持哪些 CSS 特性？
支持标准 CSS，包括版式、颜色、字体、背景、边框和表格。CSS Grid 的高级功能、复杂动画和某些 Flexbox 边缘情况可能受限。