脚本文件:dompdf-page-exporter.user.js
推荐直接通过 GitHub Raw 安装:
- 安装链接:
https://raw.githubusercontent.com/lmn1919/web-to-pdf-userscript/main/dompdf-page-exporter.user.js
安装步骤:
- 在浏览器中安装 Tampermonkey。
- 打开上面的安装链接,或将它粘贴到浏览器地址栏。
- 在 Tampermonkey 弹出的安装页中确认安装。
- 在 Tampermonkey 设置中允许脚本访问本地文件(如果需要导出
file://页面)。 - 刷新需要导出的网页,点击右下角的 PDF 按钮。
如果你还没有推送到新仓库,也可以先打开 Tampermonkey 的“添加新脚本”页面,将 dompdf-page-exporter.user.js 的完整内容粘贴进去并保存。
脚本会通过元数据自动加载:
dompdf.js:https://cdn.jsdelivr.net/npm/dompdf.js@latest/dist/dompdf.min.js- 中文字体:
https://dompdfjs.lisky.com.cn/SourceHanSansSC-Regular.ttf
字体由脚本管理器作为 @resource 下载和缓存,仅在第一次生成 PDF 时转换成字体字节,不会在每次导出时重复请求。
如果脚本管理器的资源 URL 无法被页面 fetch 读取,脚本会自动尝试使用特权请求接口从字体服务器读取。首次安装时请允许脚本访问外部资源。
脚本头部已经包含 @updateURL 和 @downloadURL。后续只要更新脚本文件并提升 @version,Tampermonkey 就可以检测并安装新版本。
- 打开导出面板。
- 选择“整个网页”。
- 如有导航、广告或浮动控件不需要导出,点击“排除元素”并在页面中选择它们。
- 在“页面设置”中调整纸张、方向、页边距等选项。
- 点击“生成 PDF”,完成后选择预览或下载。
- 选择“选择节点”或点击“选择内容”。
- 点击页面元素,将其设为导出范围;再次点击其他节点会替换当前选择。
- 使用底部工具栏切换父节点、子节点或前后同级节点。
- 点击面包屑中的任意层级,可直接切换到对应祖先节点。
- 点击“完成”返回导出面板。
选择过程中只能保留一个内容节点。鼠标悬停只显示节点预览,不会自动加入导出范围;点击页面节点或按 Enter 后才会提交选择。排除元素仍可选择多项。
节点选择快捷键:
| 快捷键 | 操作 |
|---|---|
Enter |
加入或移出当前节点 |
Esc |
取消本次选择并恢复原状态 |
Backspace |
撤销最近一次选择 |
Alt + ↑ |
父节点 |
Alt + ↓ |
第一个可见子节点 |
Alt + ← |
上一个同级节点 |
Alt + → |
下一个同级节点 |
仓库中的 demo.html 用于验证脚本界面和导出流程。先在仓库根目录启动静态服务器,再访问:
python -m http.server 8080 --bind 127.0.0.1http://127.0.0.1:8080/userscript/demo.html
推荐通过 HTTP 服务打开演示页。直接使用 file:// 时,Tampermonkey 需要开启“允许访问文件网址”;脚本会改用远程字体并尝试特权请求,但浏览器仍可能限制 Worker 或 WASM 资源。若出现资源加载错误,请改用 HTTP 服务。
- 所有 PDF 生成工作都在当前浏览器内完成,脚本不会上传网页内容。
- 跨域图片能否导出取决于图片服务器是否允许 CORS 读取。
- 节点模式直接导出当前选中的单个元素;点击其他节点会替换原选择。
- 动画、视频、iframe、复杂滤镜和浏览器插件内容可能被降级或无法导出。
latest版本便于持续获得新版能力;生产环境如需严格复现,可将@require改成明确的 npm 版本号。