模板使用
约 1414 字大约 5 分钟
...
2025-11-04
浏览器打印
注意
浏览器打印,没办法监听 浏览器弹窗的 "打印" 按钮. 也没有办法控纸张,打印份数等等. 【这是浏览器的限制】
根据前面导出的模板json. 创建模板对象:
// 或 import { hiprint } from '@sv-print/hiprint'; (不依赖设计器组件的时候)
import { hiprint } from 'sv-print';
// 模板json
const json = {}; // 根据导出的模板json创建模板对象
// 模板对象
let printTemplate = new hiprint.PrintTemplate({ template: json });
// 打印数据
const printData = { name: 'sv-print' };
// 偏移设置: 不同PC 同一个打印机可能存在偏移 单位: pt
let offsetOption = { leftOffset: -1, topOffset: -1 };
// 'sv-print' 将填充 模板json中 字段名(field)为name的元素.
await printTemplate.print(printData, { ...offsetOption });
// 批量打印
await printTemplate.print([printData, printData, printData], { ...offsetOption });静默打印(无弹窗打印)
需要安装打印客户端. 可监听打印是否成功发送给打印机. 控制打印纸张,打印份数等等.
// 或 import { hiprint } from '@sv-print/hiprint'; (不依赖设计器组件的时候)
import { hiprint } from 'sv-print';
// 模板json
const json = {}; // 根据导出的模板json创建模板对象
// 模板对象
let printTemplate = new hiprint.PrintTemplate({ template: json });
// 打印数据
const printData = { name: 'sv-print' };
// 偏移设置: 不同PC 同一个打印机可能存在偏移 单位: pt
let offsetOption = { leftOffset: -1, topOffset: -1 };
// 'sv-print' 将填充 模板json中 字段名(field)为name的元素.
const res = await printTemplate.print2(printData, {
...offsetOption,
printer: '打印机名称', // 不传则 使用默认打印机
// 纸张大小, 单位: 毫米
pageSize: { width: 210 * 1000, height: 297 * 1000 },
copies: 2, // 打印份数
landscape: false, // 横向打印: false: 纵向, true: 横向
color: true, // 是否彩色打印
});
console.log(res);
// 批量打印
const res2 = await printTemplate.print2([printData, printData, printData]);注意
下面功能需要 引入对应插件！按需引入,减少打包体积.
导出pdf
// 需引入插件 @sv-print/plugin-api-pdf3
// 更多参数 可查看 snapdom官方文档 https://github.com/zumerlab/snapdom/blob/main/README_CN.md#api
// 导出PDF -> 默认下载
const res = await printTemplate.toPdf(printData, {
name: 'pdf名称',
isDownload: true, // 是否自动下载 默认true
type: 'blob', // 默认 blob 支持: blob、bloburl、pdfobjectnewwindow、dataurl --> jspdf.output(type)
// 比如当前模板 60*80, 填充至 A4 纸张 则 纸张宽度 210mm, 纸张高度 297mm
paperWidth: 210, // 纸张宽度 mm
paperHeight: 297, // 纸张高度 mm
pixelRatio: 2, // 图片像素比 2: 提高清晰度 默认 window.devicePixelRatio.
onProgress: (cur, total) => {
const percent = Math.floor((cur / total) * 100);
console.log('toPdf 进度', percent);
},
});导出图片
// 需引入插件 @sv-print/plugin-api-image
// 更多参数 可查看 snapdom官方文档 https://github.com/zumerlab/snapdom/blob/main/README_CN.md#api
// 导出图片 -> 默认下载
const res = await printTemplate.toImage(printData, {
name: '图片名称',
isDownload: true, // 是否自动下载 默认true
limit: 10, // 导出 单图片 页数限制 默认10
// 比如当前模板 60*80, 填充至 A4 纸张 则 纸张宽度 210mm, 纸张高度 297mm
paperWidth: 210, // 纸张宽度 mm
paperHeight: 297, // 纸张高度 mm
pixelRatio: 2, // 图片像素比 2: 提高清晰度 默认 window.devicePixelRatio.
quality: 0.8, // 默认 0.92 图片质量 0-1
onProgress: (cur, total) => {
const percent = Math.floor((cur / total) * 100);
console.log('toImage 进度', percent);
},
});导出excel
// 需引入插件 @sv-print/plugin-api-excel
// 导出excel -> 默认下载
const res = await printTemplate.toExcel(printData, {
isDownload: true, // 是否下载 默认true
name: 'sv-print', // 下载名称
pixelRatio: 2, // 图片像素比 2: 提高清晰度 默认 window.devicePixelRatio.
onProgress: (cur, total) => {
const percent = Math.floor((cur / total) * 100);
console.log('toExcel 进度', percent);
},
// 默认字体，默认 Microsoft YaHei
fontName: 'Microsoft YaHei',
// 默认字号(pt)，默认 10
fontSize: 10,
// 工作表名称前缀，默认 Sheet
sheetName: 'Sheet',
// 是否开启多工作表(1页一个sheet), 默认 true
multiSheet: true,
// 页面间隙（pt），默认 `0` 页面紧贴无间隙；仅 `multiSheet: false` 时生效
pageGap: 10, // 10pt 间距
});导出word
// 需引入插件 @sv-print/plugin-api-word
// 导出word -> 默认下载
const res = await printTemplate.toWord(printData, {
isDownload: true, // 是否下载 默认true
name: 'sv-print', // 下载名称
pixelRatio: 2, // 图片像素比 2: 提高清晰度 默认 window.devicePixelRatio.
outputType: 'blob', // 导出word 输出类型 "blob" | "arraybuffer" | "bloburl" | "datauristring"
onProgress: (cur, total) => {
const percent = Math.floor((cur / total) * 100);
console.log('toWord 进度', percent);
},
// 默认字体，默认 Microsoft YaHei
fontName: 'Microsoft YaHei',
// 默认字号(pt)，默认 10
fontSize: 10,
});常见问题
sv-print 如何实现静默打印（无弹窗打印）？
安装打印客户端后，调用模板对象的 print2 方法并传入打印机名称（printer）、纸张（pageSize）、份数（copies）、横纵向（landscape）、彩色（color）等参数即可；print2 数据传数组即为批量打印，且可监听打印是否成功发送给打印机。浏览器打印用 print 方法，但受浏览器限制无法控制纸张与打印份数。
导出 PDF/图片/Excel 需要额外安装插件吗？
需要，按需引入以减少打包体积：导出 PDF 装 @sv-print/plugin-api-pdf3（或 plugin-api-pdf）、导出图片装 plugin-api-image、导出 Excel 装 plugin-api-excel、导出 Word 装 plugin-api-word。通过 hiprint.register 注册后，模板实例即拥有对应的导出方法。
版权所有
版权归属：sv-print