~/utility/web-printer
Universal Web Printer——URL 与 HTML 转 PDF、图片
将任意 URL 或 HTML 转换为 PDF、PNG、JPEG 或 WebP，支持智能滚动拼接、元素提取、PDF 加密与水印。
媒体
TypeScriptPlaywrightPDF-libSharp
全球
分类utility / 媒体
语言TypeScript
技术栈TypeScript, Playwright, PDF-lib, Sharp
市场全球
输出干净、RAG 就绪的 JSON
核心特性
多格式输出——PDF、PNG、JPEG、WebP
多种视图模式——viewport（视口）、full-page（整页）、CSS 选择器、readability（阅读模式）
智能滚动拼接，实现精确的整页截图
通过 CSS 选择器实现元素级提取
页面操控——移除元素、点击按钮、注入 CSS、隐藏固定头部
PDF 加密（RC4 128 位）与水印
支持多页文档的 PDF 合并
自定义视口与缩放比例配置
应用场景
- 从网页仪表盘自动生成报告
- 网站存档与留档
- 视觉回归测试快照
- 为商品目录截取电商商品页截图
- 法律合规——将网页内容截取存证
- 从 Web 应用生成 PDF
输入参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
sourceType | string | 可选 | url（默认）或 html——分别渲染 startUrls 或 htmlContent |
startUrls | array | 可选 | 待渲染的 URL |
htmlContent | string | 可选 | 待渲染的原始 HTML |
outputFormat | string | 可选 | pdf、png、jpeg 或 webp（默认：pdf） |
viewMode | string | 可选 | viewport、fullPage、selector 或 readability |
targetSelector | string | 可选 | 用于元素级截图的 CSS 选择器 |
viewportWidth | number | 可选 | 浏览器视口宽度（默认：1280） |
viewportHeight | number | 可选 | 浏览器视口高度（默认：720） |
scaleFactor | number | 可选 | 设备缩放比例，让截图更清晰（默认：2） |
removeSelectors | array | 可选 | 截图前要移除元素的 CSS 选择器 |
clickSelectors | array | 可选 | 截图前要点击的元素的 CSS 选择器，例如“加载更多”按钮 |
hideFixedElements | boolean | 可选 | 截图期间隐藏导航栏等固定/吸顶元素（默认：true） |
customCss | string | 可选 | 渲染前注入的自定义 CSS |
pdfPassword | string | 可选 | 使用 RC4 128 位加密对 PDF 进行加密 |
mergePdfs | boolean | 可选 | 将所有生成的 PDF 合并为单个文件 |
watermark | object | 可选 | 为输出文件添加文本或图片水印 |
输出示例
该工具会按你选择的格式（PDF、PNG、JPEG 或 WebP）生成文件，并存储到 Apify 数据集中。每个输出都包含以下元数据：
1{
2 "url": "https://example.com",
3 "sourceType": "url",
4 "outputFormat": "pdf",
5 "viewMode": "full-page",
6 "fileName": "example_com_2025-12-11T16-06-29-849Z.pdf",
7 "fileUrl": "https://api.apify.com/v2/key-value-stores/abc123DEF456ghi78/records/example_com_2025-12-11T16-06-29-849Z.pdf",
8 "fileSize": 41613,
9 "pageCount": 1,
10 "capturedAt": "2025-12-11T16:06:29.852Z"
11}
常见问题
可以只截取页面上的特定元素吗？
可以，使用 targetSelector 参数配合 CSS 选择器，即可只截取特定元素。例如，使用 '#main-content' 就能只截取主要内容区域。
智能滚动拼接是如何工作的？
在整页截图时，工具会分段滚动页面，逐个截取每个视口切片，再将它们拼接起来。这能确保懒加载内容与动画都被正确捕获。
可以在截图前移除 cookie 提示条或广告吗？
可以，使用 removeSelectors 指定要移除元素的 CSS 选择器。你也可以使用 hideFixedElements 来隐藏吸顶头部与悬浮元素。