HTML转PDF

粘贴HTML代码,或把保存下来的网页连同图片和样式表一起打开,按真实纸张宽度实时预览,选择纸张大小、页边距、页眉页脚和页码,然后下载PDF。另一个按钮调用浏览器自带的打印功能,生成文字可选中、可搜索的PDF。所有文件都不会上传。

免费 · 无需注册

页面预览
页面设置
方向

默认不运行JavaScript。只有在代码可信时才开启,例如需要先绘制图表再转换。

粘贴HTML或打开文件,预览会随输入实时更新。

“下载PDF”会按预览效果逐页绘制,保留网页字体和颜色。“另存为PDF”会打开浏览器打印窗口:打印机选择“另存为PDF”,文字可搜索,链接可点击。

使用开源库: html2canvas (MIT), pdf-lib (MIT).

使用方法

  1. 粘贴HTML代码,或把.html文件和它用到的图片、CSS文件一起打开。
  2. 查看预览,选择纸张大小、方向和页边距。
  3. 需要时添加页眉、页脚和页码。
  4. 点击“下载PDF”,或点击“另存为可选中文字的PDF”使用浏览器打印窗口。

为什么使用这个工具

代码和文件都能转

把.html文件连同图片、字体和样式表一次打开,会自动关联。

按纸张宽度预览

预览使用纸张的可打印宽度,转换前就能看到换行和分页位置。

完整的页面设置

A4、A3、A5、B5、Letter 或自定义尺寸,纵向横向均可,页边距可自定义。

分页不截断

自动在行与行之间分页,并遵循 break-before: page 等CSS分页规则。

中文不乱码

使用设备自带的中文字体(微软雅黑、苹方、思源黑体等)绘制,页眉页脚也能写中文。

文件不上传

转换全部在浏览器中完成,合同、报价单和报告不会离开你的电脑。

HTML转PDF的两种方式

“下载PDF”按预览效果逐页绘制,并以高清图片保存到PDF中。在任何阅读器中显示效果都一致,网页字体、渐变和SVG图表都能保留;缺点是文字无法选中和搜索。

“另存为可选中文字的PDF”会把页面连同纸张、页边距和页码设置交给浏览器打印。在打印窗口中选择“另存为PDF”或“Microsoft Print to PDF”。生成的文件保留真实文字和可点击链接,体积也更小,适合合同、报价单和技术文档。

下载PDF另存为PDF(打印)
文字可选中、可搜索否是
链接可点击否是
与预览完全一致是基本一致
文件大小较大较小
手机可用是取决于浏览器

HTML转PDF中文乱码怎么办

很多转换工具在服务器上运行,服务器缺少中文字体时,中文就会变成方框或乱码。本工具在你的浏览器里转换,直接使用电脑或手机上已安装的中文字体,因此一般不会乱码。

如果页面指定了特殊字体,请在CSS中加入常用中文字体作为备选,例如 font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;,或者把字体文件和HTML一起打开。另外请确认HTML开头有 <meta charset="utf-8">。

用CSS控制分页

给元素加上 break-before: page,它就会从新的一页开始,适合附件和章节。用 break-inside: avoid 可以防止表格行、图片和卡片被分到两页。两种转换方式都支持这些规则。

只在打印时生效的样式写在 @media print 中:用 display: none 隐藏导航和按钮,字号用磅(pt)表示,打印出来的大小更稳定。

把网页保存为PDF

出于浏览器安全限制,工具无法直接读取其他网站的网址。请打开网页,按 Ctrl+S(Mac 上为 Cmd+S)选择“网页,全部”保存,然后在这里把保存的.html文件和同名文件夹中的文件一起打开,图片和样式会自动关联。

常见问题

HTML会上传到服务器吗?

不会。预览、绘制和生成PDF都在浏览器中完成,可以放心转换内部文件。

为什么下载的PDF里文字选不中?

“下载PDF”把每页存成图片,以保证和预览完全一致。需要保留文字时,请用“另存为PDF”,在打印窗口选择“另存为PDF”。

能直接输入网址转PDF吗?

浏览器限制了读取其他网站,所以不能直接转换网址。请先用 Ctrl+S 把网页保存为“网页,全部”,再打开保存的文件和文件夹内容。

转换后中文乱码怎么办?

本工具使用设备上的中文字体,一般不会乱码。若仍有问题,请检查HTML是否声明了 UTF-8 编码,并在CSS中加入常用中文字体。

怎样添加页码?

勾选“页码”即可。下载PDF时页码显示在右下角;通过打印另存时,在支持页边距区域的浏览器(如新版 Chrome 和 Edge)中显示。

支持 Flex、Grid 布局和网页字体吗?

支持。两种方式都能处理现代布局,网页字体只要在页面中引用或作为文件一起打开就会加载。

相关工具

想开发什么吗?

告诉我们你想构建什么。

告诉我们您需要构建什么:从简单的网站到完整应用、AI 解决方案、自动化或定制系统都可以。

告诉我们您想构建什么。我们会查看每一份咨询并通过邮件回复。

联系

感谢您,咨询已发送。

我们会查看详细信息并通过邮件回复。