长图导出 plugin-api-image
约 618 字大约 2 分钟
...
2026-09-28
插件说明
@sv-print/plugin-api-image 为打印模板实例挂载 toImage 方法，用于导出长图。原理：每页 DOM 通过 snapdom 截图后，每 N 页纵向拼接为一张长图。
核心能力：
- 挂载
template.toImage(printData, options?)，返回 Deferred promise，结果为 url 或 blob - 通过
limit控制每张长图包含的页数 - 支持
image/jpeg/image/png输出格式 - 页级进度回调
onProgress，可自定义截图清晰度与图片质量
第三方依赖：snapdom。
npm install @sv-print/plugin-api-image示例代码
唯一注册入口 hiprint.register（异步），须在创建模板之前注册：
import pluginApiImage from '@sv-print/plugin-api-image';
await hiprint.register({
plugins: [pluginApiImage()], // 工厂函数，可传 config
});
const template = new hiprint.PrintTemplate(options); // 须在 register 之后创建模板
// "text" 是元素的字段名(field)
const printData = { text: '这是打印时显示的文本' };
// 导出图片，获取 url/blob 对象
const res = await template.toImage(printData, {
isDownload: false, // 不自动下载
name: '图片名称',
limit: 10, // 默认 10，多少页为一个图片文件
type: 'image/jpeg', // 默认 image/jpeg
pixelRatio: 2, // 图片像素比，默认 window.devicePixelRatio
quality: 0.8, // 默认 0.92，图片质量 0-1
toType: 'url', // 默认 url，支持 url、blob
onProgress: (cur, total) => {
console.log('toImage 进度', Math.floor((cur / total) * 100) + '%');
},
});
console.log('toImage', res);高级用法
toImage 参数
| 参数 | 默认 | 说明 |
|---|---|---|
| isDownload | true | 是否自动下载 |
| name | download.jpg | 文件名 |
| limit | 10 | 每张长图包含的页数，页数越多图越长 |
| type | 'image/jpeg' | MIME 类型，可 image/png（对应 canvas.toDataURL(type, quality)） |
| pixelRatio | dpr | 截图清晰度 |
| quality | 截图 0.92 / 输出 0.8 | 图片质量 0-1 |
| toType | 'url' | 返回 url 或 blob |
| onProgress(cur, total) | - | 进度回调 |
注意事项
- 所有 api 插件依赖
globalThis.$（jQuery Deferred）与globalThis.hinnn，由 sv-print 内核提供 - 截图方案导出的为位图，放大后受
pixelRatio限制；需要矢量与文字可选中请使用 plugin-api-pdf-vector
版权所有
版权归属：sv-print