如何使用 HTML 轉 PDF / 網页轉 PDF 工具？
这是一個專為前端开发者和设计者打造的線上工具，可以將您的 HTML 结构 和 CSS 样式 實時渲染并匯出為多种格式。無论是實現 HTML 轉換成 PDF，还是將網页输出為 PDF 或圖片，都能轻松應对。支援線上 HTML 轉 PDF，100% 隱私保護。
1. 编写程式碼
在左侧编辑器中輸入 HTML 标签和 CSS 样式，右侧預覽窗口會自動同步显示渲染效果。
2. 調整布局
您可以直接在 CSS 中控制容器的寬度、高度、外邊距等，預覽窗口中的白色区域即為匯出的范围。
3. 一鍵匯出
满意後點選“匯出 PNG”或“匯出 PDF”，工具會在瀏覽器本地生成高畫質文件并自動下載。
常見問題 (FAQ)
1. 匯出过程會上傳我的程式碼吗？
绝不上傳。 所有的渲染（使用 iframe）、捕获（使用 html2canvas）和生成（使用 jsPDF）过程均在您的瀏覽器本地完成。您的程式碼和生成的文件都不會离开您的電腦，100% 隱私保護。
2. 為什麼匯出的圖片/PDF 中某些样式（如圆角、渐变）显示不正常？
本工具使用
html2canvas 將 HTML 轉換為畫布。虽然它支援绝大多數现代 CSS 属性，但对某些高级特性（如 filter、backdrop-filter 或复杂的 clip-path）可能存在限制。建議使用标准的盒模型和 Flex/Grid 布局以获得最佳效果。
3. 匯出 PDF 是矢量的吗？
目前的 PDF 匯出方案是將 HTML 轉換為高畫質位圖後再嵌入 PDF 文件。这样做可以確保匯出效果與預覽 100% 一致，避免了字體缺失导致的排版错乱。虽然不是純矢量，但匯出的 PDF 具有很高的 DPI，列印效果非常清晰。
4. 支援哪些 HTML 标签和 CSS 属性？
本工具支援绝大多數标准的 HTML5 标签和 CSS3 属性。但请注意：
1. 由於瀏覽器安全策略，跨域引用（如非本站域名下的圖片）可能無法渲染，建議將圖片轉換為 Base64 後嵌入。
2. 匯出引擎对某些較新的 CSS 特性（如
1. 由於瀏覽器安全策略，跨域引用（如非本站域名下的圖片）可能無法渲染，建議將圖片轉換為 Base64 後嵌入。
2. 匯出引擎对某些較新的 CSS 特性（如
gap、复杂的 filter 或 backdrop-filter）支援不够完美，导致位置偏移。建議使用 margin 代替 gap 进行間距控制。
5. 如何調整匯出的尺寸？
您無需在工具設定中寻找尺寸选项，直接在 CSS 中修改您主容器（如
.card）的 width 和 height 即可。預覽窗口會自動感知內容大小并动态調整捕获区域。
6. 工具支援匯出透明背景吗？
支援。如果您在 CSS 中將最外层元素的背景設定為
transparent，那么匯出的 PNG 圖片背景將是透明的，非常适合製作水印或悬浮元件。
7. 為什麼在手機上匯出效果不佳？
由於行動端瀏覽器对
html2canvas 和 jsPDF 等重計算库的性能限制及 API 兼容性差异，建議在 PC 端（Chrome、Edge 或 Firefox）使用本工具以获得最佳的渲染速度和匯出質量。
8. 匯出是完全免費的吗？
是的。蝸蝸小工具秉持免費、高效、隱私的原则，该工具没有任何下載次數限制，無需登入即可使用。您的程式碼處理均在本地完成，不會消耗我們的伺服器资源，因此永久免費。