前言

在日常开发中，我们经常会遇到这样的需求：需要将网页内容导出为图片或者生成一份高质量的 PDF 文档。

比如客-服系统要导出聊天记录存档，电商平台要生成订单详情和发票，报表系统要把数据可视化图表导出为报告，或者在线文档工具要支持用户将内容离线保存。

传统方案通常采用 html2canvas + jsPDF 的组合，但实际使用中你会发现不少问题：CSS 样式还原度不高，复杂布局经常错位，渐变和阴影效果丢失，字体渲染不完整，导出的图片清晰度不够，打印出来模糊不清。

有没有更好的处理方案？今天给大家介绍一款新一代的 DOM 捕获引擎， SnapDOM。

​

介绍

SnapDOM 是一款现代化的 DOM 截图库，它的定位是"DOM Capture Engine"（DOM 捕获引擎）。简单来说，它可以把任意的 DOM 子树转换成自包含的结构，然后导出为多种格式，包括：

• • SVG - 矢量图形，无限缩放不失真
• • PNG - 高质量位图
• • JPG - 压缩图片格式
• • WebP - 现代高效图片格式
• • Canvas - HTML5 画布元素
• • Blob - 二进制数据
• • 自定义格式 - 通过插件系统扩展

前端技术栈

SnapDOM 完全基于标准的 Web API 构建，不需要任何外部依赖。它使用现代的 JavaScript 特性，支持 ES Module 导入，也可以通过 CDN 直接在浏览器中使用。

后端支持

由于是纯前端方案，不需要后端服务支持。所有的转换和导出工作都在浏览器中完成，减轻了服务器压力。

核心特点

高保真还原 - 保留 CSS 样式，包括 Flexbox、Grid 布局、渐变背景、阴影效果、伪元素、自定义字体等。即使是复杂的 CSS 特性，也能准确还原。

超快速度 - 根据基准测试，在处理复杂元素时，SnapDOM 的性能远超 html2canvas 和其他同类库。简单元素捕获只需 0.5 毫秒，即使是超大尺寸的复杂页面，也只需要 171 毫秒左右。

多种输出格式 - 支持 SVG、PNG、JPG、WebP 等多种格式，满足不同场景的需求。

体积小巧 - 压缩后仅约 20KB，对页面加载影响极小。

模块化设计 - 支持 Tree Shaking，可以按需引入需要的功能，进一步减小打包体积。

插件系统 - 提供灵活的插件机制，可以自定义导出格式、添加水印、修改样式等。

技术架构

SnapDOM 的架构设计非常清晰：

1. 1. DOM 克隆 - 将目标元素及其子树完整克隆一份
2. 2. 样式提取 - 收集所有相关的 CSS 规则和样式
3. 3. 资源处理 - 处理图片、字体等外部资源
4. 4. 序列化 - 将克隆的 DOM 转换为 SVG 或其他格式
5. 5. 导出 - 生成输出文件

整个过程完全在客户端完成，不依赖任何服务器端处理。

部署方式

NPM 安装

npm install @zumer/snapdom

CDN 引入

<scriptsrc="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>

ES Module

import { snapdom } from'@zumer/snapdom';

开源协议

SnapDOM 采用 MIT 协议开源，这是一个非常宽松的开源协议。对商用项目完全友好，你可以自由地在商业项目中使用，无需支付任何费用，也无需公开你的源代码。

需要注意的是，虽然协议允许自由使用，但在实际项目中还是要注意以下几点：

• 确保项目依赖的其他库也符合你的使用场景

• 如果对项目进行了修改，建议保留原作者的版权信息

• 对于生产环境使用，建议锁定版本号，避免自动升级带来的兼容性问题

即刻体验一波

基础用法

简单的使用方式只需要两行代码：

import { snapdom } from'@zumer/snapdom';

// 获取要截图的元素
const element = document.querySelector('#target');

// 截图并导出为 PNG
const img = await snapdom.toPng(element);
document.body.appendChild(img);

完整示例

如果你想获得更多的控制权，可以使用完整的 API：

import { snapdom } from'@zumer/snapdom';

const element = document.querySelector('#target');

// 创建捕获对象
const capture = awaitsnapdom(element, {
scale: 2,        // 2倍清晰度
quality: 0.95,   // 图片质量
embedFonts: true// 嵌入自定义字体
});

// 导出为不同格式
const png = await capture.toPng();
const svg = await capture.toSvg();
const canvas = await capture.toCanvas();
const blob = await capture.toBlob();

// 直接下载
await capture.download({
format: 'jpg',
filename: 'my-capture'
});

高级配置

SnapDOM 提供了丰富的配置选项：

const capture = awaitsnapdom(element, {
// 清晰度相关
scale: 2,           // 缩放倍数
dpr: window.devicePixelRatio, // 设备像素比

// 字体处理
embedFonts: true,   // 嵌入非图标字体
localFonts: [       // 本地字体配置
    { family: 'Inter', src: '/fonts/Inter.woff2', weight: 400 }
  ],

// 跨域处理
useProxy: 'https://proxy.corsfix.com/?', // CORS 代理

// 过滤和排除
exclude: ['.cookie-banner', '.tooltip'], // 排除特定元素

// 图片质量
quality: 0.95,

// 缓存控制
cache: 'soft'// 软缓存模式
});

业务场景

场景一：客-服系统消息导出

在客-服系统中，经常需要将聊天记录导出为 PDF 存档。使用 SnapDOM + jsPDF 的组合，可以轻松实现：

import { snapdom } from'@zumer/snapdom';
import { jsPDF } from'jspdf';

// 1. 截图
const element = document.querySelector('.message-list');
const capture = awaitsnapdom(element, { scale: 2 });
const img = await capture.toPng();

// 2. 创建 PDF
const pdf = newjsPDF('p', 'mm', 'a4');
pdf.addImage(img.src, 'PNG', 10, 10, 190, 0);

// 3. 保存
pdf.save('chat-record.pdf');

场景二：电商订单导出

电商平台需要生成订单详情和发票，传统方案样式还原度低，使用 SnapDOM 可以保留所有样式：

const orderElement = document.querySelector('.order-detail');
const capture = awaitsnapdom(orderElement, {
  scale: 2,
  embedFonts: true
});

const pdf = newjsPDF();
const img = await capture.toPng();

pdf.addImage(img.src, 'PNG', 0, 0, 210, 0);
pdf.save(`order-${orderId}.pdf`);

场景三：报表系统导出

对于包含复杂图表和数据的报表系统，传统方案经常出现布局错乱。SnapDOM 的高保真特性可以处理这个问题：

const reportElement = document.querySelector('.report-container');
const capture = awaitsnapdom(reportElement, {
scale: 3,           // 更高清晰度
embedFonts: true,   // 嵌入图表字体
quality: 0.98       // 高质量
});

capture.download({
format: 'png',
filename: `report-${Date.now()}`
});

场景四：带水印的截图

通过插件系统，可以轻松添加水印、时间戳等信息：

// 自定义插件
functionwatermarkPlugin(options) {
return {
    name: 'watermark',
    asyncafterClone(context) {
      const root = context.clone;
      const watermark = document.createElement('div');
      watermark.textContent = 'CONFIDENTIAL';
      watermark.style.cssText = `
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 24px;
        color: rgba(255, 0, 0, 0.5);
        font-weight: bold;
      `;
      root.appendChild(watermark);
    }
  };
}

// 使用插件
const capture = awaitsnapdom(element, {
plugins: [watermarkPlugin()]
});

const img = await capture.toPng();

性能对比

根据基准测试数据，SnapDOM 在性能上远超传统方案：

对于复杂元素，性能优势更加明显：

可以看到，SnapDOM 的性能是传统方案的 10 倍以上。

总结

SnapDOM 作为新一代的 DOM 捕获引擎，在样式还原度、性能和易用性方面都有显著优势。无论是简单的截图需求，还是复杂的报表导出，它都能提供高质量的处理方案。

相比传统的 html2canvas，SnapDOM 在以下几个方面表现更出色：

• 样式还原度接近，支持复杂的 CSS 特性

• 性能提升 10 倍以上，即使是超大页面也能快速处理

• 体积更小，仅 20KB 左右

• API 设计更现代化，使用更简单

• 支持插件系统，可扩展性强

如果你正在寻找一个可靠的 HTML 转图片/ PDF 的处理方案，SnapDOM 绝对值得一试。

源码：https://github.com/zumerlab/snapdom

阅读原文：原文链接