zumerlab/snapdom

这是什么？

核心功能

• 01一次截取即可输出 SVG、PNG、JPG、WebP、canvas 或 Blob。
• 02未变化的截取会被复用，小改动只重建受影响的子树。
• 03官方插件支持导出 HTML、PDF、可编辑矢量、GIF 和视频。
• 04插件钩子允许开发者编写自定义导出器。
• 05可通过选项控制尺寸、缩放、背景、排除元素和字体嵌入。
• 06提供 ES 模块、script 标签和 TypeScript 类型声明。

适用场景

• 在 Web 应用中将仪表盘、图表或账单导出为图片分享。
• 基于页面渲染内容生成 PDF 报告或可打印页面。
• 导出可编辑的矢量图形，或将设计粘贴到 Figma。
• 为 AI 智能体提供页面内容的文本或图像视图。

快速上手

1. 1

   使用 npm 安装核心包

   npm i @zumer/snapdom
2. 2

   导入 snapdom 并将元素导出为 PNG

使用前须知

• !SnapDOM 需要浏览器 DOM，服务端 Node.js 运行时需要浏览器环境。
• !跨域的图片、字体和样式表需要可读资源或代理，跨域 iframe 会显示占位内容。
• !SVG 输出依赖 foreignObject，在浏览器之外的查看器中支持程度不一。

标签

常见问题

snapdom 是什么？

浏览器端 JavaScript 引擎，可将 DOM 元素截取并导出为 SVG、PNG、JPG、WebP 等格式，并支持 PDF、矢量等插件。 SnapDOM 在页面内截取 DOM 元素，并将其转换为 SVG、PNG、JPG、WebP、canvas 或 Blob 等格式。同一次截取可以复用于多种输出，即使源元素之后发生变化，结果仍保留截取时的状态。

snapdom 可以免费使用吗？用的什么许可证？

snapdom 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

snapdom 还在维护吗？

活跃维护中。snapdom 最近一次提交是在 2026年10月20日。

snapdom 适合用来做什么？

在 Web 应用中将仪表盘、图表或账单导出为图片分享。 基于页面渲染内容生成 PDF 报告或可打印页面。 导出可编辑的矢量图形，或将设计粘贴到 Figma。 为 AI 智能体提供页面内容的文本或图像视图。

snapdom 怎么安装和运行？

使用 npm 安装核心包: npm i @zumer/snapdom 导入 snapdom 并将元素导出为 PNG

在哪里获取 snapdom？

源代码和安装说明在 GitHub 上：https://github.com/zumerlab/snapdom