投标文件打包前
商务标和技术标是分开的 Word 文档，甲方要求最终只收一份 PDF，且页码连续。凌晨两点还在逐页复制粘贴，稍有不慎就漏页或格式错乱。把两个文档的 HTML 源码分别粘贴进工具，按顺序合并转出，生成的 PDF 自动保留原字体和表格线，页码从 1 开始连续编排，不用再开 Adobe Acrobat 手动拼合。
H T M L 源 码
可含 <style> 与内联 CSS
纯本地无法跨域抓取任意网址。请在浏览器打开目标网页，按 右键 → 查看网页源代码 / Ctrl-U，把 HTML 源码粘到下方编辑框。URL 直转 PDF 需服务端（Puppeteer / Playwright / wkhtmltopdf）。
预 览 · 脚本已脱毒
A4 · 210×297mm
隐私：HTML 的解析、渲染、PDF 导出全程在浏览器本地完成，源码绝不上传服务器。预览采用 sandbox iframe，并移除
<script> / 事件属性 / javascript: 协议脱毒，脚本不会执行。导出走浏览器打印 → 「另存为 PDF」，文字矢量可选、中文原生。
就绪 · 粘贴 HTML 代码即时预览
第一节
关于本工具
About一张网页要转成 PDF 留档时，截图太糊、打印太慢。这个工具接受 URL 或 HTML 代码，用无头浏览器渲染后导出为 PDF，保留超链接和可选中文字。文件在浏览器端处理，不上传服务器——适合前端开发者做文档归档、设计师截取线上页面样式，或运营人员保存活动快照。
使用场景
网页截图做证据
电商卖家发现竞品页面凌晨偷偷改了价格条款，需要保留当晚 23:59 的页面快照作为投诉证据。直接打印网页会丢失动态加载的评论区和折叠的规格表。把整页 HTML 代码（含内联样式和 base64 图片）复制进工具，转出的 PDF 完整保留所有展开内容，包括鼠标悬停才显示的售后说明，时间戳由浏览器渲染时写入页面底部，形成不可篡改的电子证据链。
技术文档离线分发
工厂设备维护手册是内部 Wiki 系统里的，维修工在无网络的车间里用手机根本打不开。每台设备有 40 多页的操作规程，包含大量代码块和电路图。把 Wiki 上每章节的 HTML 源码依次粘贴，工具自动将代码块保持等宽字体、电路图 SVG 矢量不失真，转出的 PDF 只有 2MB，存入平板电脑，现场放大 300% 看接线端子编号依然清晰。
公众号文章存档
运营需要把上个月发布的 12 篇行业分析文章整理成季度合集发给客户，但微信后台导出的 PDF 会把排版全部打乱，图片也压成马赛克。每篇文章用浏览器「查看源代码」复制正文 HTML，剔除广告和底部二维码，保留原有的标题层级、引用块和表格，转出的 PDF 每篇从新页开始，目录可以手动添加书签，客户在 iPad 上阅读体验接近原版公众号。
简历投递格式校验
用 LaTeX 或在线编辑器排好简历，导出 PDF 后发给朋友预览，发现手机端显示字体缺失、排版错位。把简历的完整 HTML 代码（含 @font-face 嵌入的思源黑体）粘贴进工具，生成的 PDF 在任何 PDF 阅读器上都保持设计稿的精确位置，包括 2mm 出血线和图标对齐，确保 HR 打印出来和屏幕上看到的一模一样。
第二节
使用指南
Getting Started使用步骤
- 1在输入区粘贴完整 HTML 代码或网页 URL，工具自动识别来源类型并显示预览缩略图
- 2点击「页面尺寸」下拉框选纸张规格（A4 / Letter / 自定义），宽高输入框同步激活
- 3勾选「保留背景色」或「移除页眉页脚」后，右侧实时渲染 PDF 效果预览
- 4点「生成 PDF」按钮，进度条从 0% 走到 100% 后弹出下载对话框
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| https://example.com | example.com 页面的 PDF 文件（含标题、正文、图片） | 常规：输入标准 URL，验证基本 HTML 转 PDF 功能，输出包含完整页面内容 |
| <h1>Hello World</h1><p>This is a test.</p> | PDF 文件：第一页顶部显示大号加粗 'Hello World'，下方为普通字体段落 'This is a test.' | 常规：输入纯 HTML 代码，验证代码解析和排版能力，输出保留标签样式 |
| https://very-long-domain-name-that-exceeds-2048-characters.example.com/path?param=1¶m=2...（共 3000 字符） | 错误提示：URL 长度超过限制（最大 2048 字符） | 边界：超长 URL 触发输入验证，暴露工具对 URL 长度的限制 |
| <script>alert('XSS')</script><p>Safe content</p> | PDF 文件：仅包含 'Safe content' 段落，无弹窗或脚本执行痕迹 | 边界：含脚本标签的 HTML，验证工具是否过滤或忽略 JavaScript，仅渲染安全内容 |
| 错误提示：输入不能为空，请输入 URL 或 HTML 代码 | 边界：空输入触发前端校验，暴露工具对空白输入的处理方式 | |
| http://192.168.1.1/private | 错误提示：不支持内网地址（127.0.0.0/8、10.0.0.0/8、172.16.0.0/12、192.168.0.0/16） | 易错：用户误输入内网 URL，工具明确拒绝以保护隐私和安全 |
| https://example.com?redirect=http://malicious-site.com | 错误提示：检测到重定向到非 HTTPS 或未知域名，已终止转换 | 易错：URL 含重定向参数，工具拦截潜在安全风险，防止跳转到恶意站点 |
| <style>body{font-size:0px;}</style><p>Invisible text</p> | PDF 文件：页面空白，无可见文字 | 易错：CSS 将字体设为 0，用户可能误以为工具故障，实际是样式导致内容不可见 |
常见错误对照
1.HTML 中包含外部资源但未提供完整路径
✗ 错误
<img src="logo.png">✓ 修复
<img src="https://example.com/logo.png">工具在无头浏览器中渲染，相对路径相对于临时工作目录，不指向用户机器或网络。外部资源必须使用绝对 URL 才能正确加载。
2.CSS 中使用了 @import 但未考虑加载顺序
✗ 错误
<style>@import url('style.css');</style>✓ 修复
<link rel="stylesheet" href="https://example.com/style.css">无头浏览器对 @import 的解析可能因网络延迟导致样式丢失。改用 <link> 标签可确保样式在渲染前加载完毕。
3.JavaScript 动态内容未等待渲染完成
✗ 错误
document.getElementById('chart').innerHTML = chart.render();✓ 修复
setTimeout(() => { document.getElementById('chart').innerHTML = chart.render(); }, 200);无头浏览器截取 PDF 时可能早于 JS 执行完毕。需确保所有异步操作（图表、数据请求）完成后才触发页面稳定状态。
4.字体使用了本地路径，PDF 中显示为乱码或空白
✗ 错误
@font-face { src: url('C:/Windows/Fonts/msyh.ttf'); }✓ 修复
@font-face { src: url('https://cdn.example.com/fonts/msyh.ttf'); }服务端无头浏览器无法访问客户端本地文件系统。所有字体必须通过 HTTP/HTTPS 可访问的 URL 加载。
5.HTML 中包含了未闭合的标签
✗ 错误
<div><p>内容</div>✓ 修复
<div><p>内容</p></div>浏览器容错机制会尝试自动闭合，但不同无头引擎的容错结果不一致，可能导致 PDF 布局错乱。必须使用 W3C 规范的有效 HTML。
6.使用了 <base> 标签但 href 值错误
✗ 错误
<base href="https://example.com/"> 然后 <a href="page.html">✓ 修复
<base href="https://example.com/sub/"> 然后 <a href="page.html"><base> 标签改变所有相对 URL 的基准路径。如果基准路径与实际资源路径不匹配，所有链接、图片、样式表都会 404。
7.PDF 页面尺寸未通过 CSS 明确指定
✗ 错误
无 @page 规则，依赖默认 A4✓ 修复
@page { size: A4; margin: 20mm; }无头浏览器默认打印尺寸可能为 Letter（美国）或 A4（其他），且边距因引擎而异。显式声明 @page 可保证输出一致性。
8.长表格或内容未设置分页控制
✗ 错误
<table><tr>...50行...</tr></table>✓ 修复
<table style="page-break-inside: avoid;">...</table>无头浏览器默认在内容溢出时自动分页，但可能从表格中间断开。使用 page-break-inside: avoid 可保持行或单元格完整。
第三节
工作原理
How It Works核心公式
PDF页数 = ceil(内容总高度 ÷ (页面高度 - 上边距 - 下边距))
变量说明
内容总高度HTML 渲染后总高度，单位 px页面高度PDF 页面高度，默认 297mm ≈ 1123px上边距PDF 页面上边距，默认 20mm ≈ 75px下边距PDF 页面下边距，默认 20mm ≈ 75px
示例
一个 HTML 文档渲染后总高度为 4500px，PDF 页面高度 1123px，上下边距各 75px：每页可用高度 = 1123 - 75 - 75 = 973px；PDF 页数 = ceil(4500 ÷ 973) = ceil(4.625) = 5 页。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问支持把整个网页转成PDF吗？还是只能转一小段HTML代码？＋
答
两种都支持。URL输入框里填网页地址（http/https开头），工具会用无头浏览器完整加载页面后导出PDF，包括CSS样式、图片和JavaScript动态内容。代码输入框则适合你有一段纯HTML片段、想快速转成PDF的场景。注意URL转PDF会等待页面加载完成，如果网页有大量异步请求或长时间动画，可能截取不完全，建议等页面稳定后再用。
问转出来的PDF排版和网页上看到的不一样，字体/布局变了怎么回事？＋
答
最可能的原因是网页使用了本地字体（比如Windows下的微软雅黑）而工具运行环境没有。无头浏览器会用默认字体替换，导致字间距、行高变化。解决办法：把字体用@font-face内嵌到CSS里（base64或woff2格式），或者用系统安全字体（Arial/宋体）。另外，CSS中用了vw/vh单位也可能在PDF固定尺寸下变形，建议用px/pt单位。
问为什么转出来的PDF里图片特别模糊？＋
答
默认PDF输出分辨率为96DPI，如果网页里图片本身是72DPI的缩略图，放大后就会模糊。可以尝试把图片尺寸设置大一些（比如2x图），或者调整工具里的缩放比例参数（如果有）。对于矢量图形（SVG），确保没有用位图替代，SVG在PDF中会保持清晰。如果图片是外链的，检查原图是否被CDN压缩过。
问转出来的PDF文件太大，有什么办法压缩？＋
答
PDF大小主要取决于页面里的图片数量和分辨率。可以先优化网页：把图片压缩到合理尺寸（宽度不超过1200px）、用JPEG格式而非PNG、移除不必要的base64内嵌图片。如果已经生成PDF，可以用Adobe Acrobat或在线压缩工具二次处理。本工具目前没有内置压缩选项，但输出PDF默认是标准质量，不会额外放大图片。
问URL里包含登录态/需要cookie才能访问的页面能转吗？＋
答
不能直接转。因为工具的无头浏览器是一个全新会话，没有你的登录cookie。对于需要登录的页面，建议先把内容保存为HTML文件（通过浏览器'另存为'），再用代码输入模式上传HTML片段。或者使用浏览器扩展配合本地运行的无头浏览器方案。注意：不要尝试把带敏感信息的登录态URL传给在线工具，有隐私风险。
问转出来的PDF中文显示乱码或者变成方框怎么办？＋
答
这是字体缺失问题。工具运行环境默认只安装了常见中文字体（如Noto Sans CJK），如果你的网页指定了生僻字体或特殊符号字体，就会回退成方块。解决方案：在HTML的CSS中明确指定font-family: 'Noto Sans SC', 'SimSun', 'Microsoft YaHei', sans-serif；或者把用到的字体文件通过@font-face内联到CSS里（转成woff2格式，大小控制在1MB以内）。
问每次只能转一个页面吗？能不能批量转？＋
答
当前版本每次只处理一个URL或一段HTML代码。如果需要批量转多个页面，可以手动重复操作，或者考虑用命令行工具（如puppeteer脚本）批量处理。本工具定位是快速单次转换，适合偶尔使用；高频批量场景建议本地部署无头浏览器方案。注意：不要一次性提交大量请求，可能触发服务端限流。
问转出来的PDF页码怎么控制？我想从第3页开始打印，或者只想转某一段内容。＋
答
本工具默认把整个页面内容转成一页或多页PDF（按内容高度自动分页）。如果你只想转特定部分，可以在HTML代码里用@media print的CSS规则隐藏不需要的元素（display:none），或者把目标内容单独提取成新的HTML片段再转换。目前不支持指定PDF页码范围（如第3-5页），但可以通过设置页面高度或CSS分页符来控制分页位置。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。