模板数据格式
约 1003 字大约 3 分钟
...
2025-11-04
模板json格式
温馨提示
一定！一定！一定！要先 理解清楚 模板json 的数据格式! 理解清楚了格式,才能少走弯路!
这个模板json数据, 是用来生成模板的. 动态创建模板，创建之前调整模板json 都是可以的！
这个模板json数据, 是可以导入导出的.
模板json.js
const templateJson = {
// 面板, 支持多面板
panels: [
{
index: 0, // 下标
name: '面板0',
height: 297, // 面板高度: 单位mm
width: 210, // 面板宽度: 单位mm
paperHeader: 49.5, // 页眉线: 单位pt, 以上的元素,每页显示
paperFooter: 780, // 页脚线: 单位pt, 以下的元素,每页显示
// 打印元素信息
printElements: [
{
options: {
left: 439.5, // 元素 相对当前 面板 的左边距: 单位pt
top: 10.5, // 元素 相对当前 面板 的上边距: 单位pt
height: 33, // 元素的高度: 单位pt
width: 150, // 元素的宽度: 单位pt
title: '支持Vue、Vue3、React、jQuery', // 元素的标题
fontSize: 12, // 元素的字体大小: 单位pt
..., // 其他元素的属性, 支持扩展
},
printElementType: {
title: '文本', // 拖拽元素时显示的标题 ,options.title 没有时,显示的标题.
// 元素的类型, 默认内置的类型: text, image, longText, table, html, hline, vline, rect, oval
type: 'text',
},
},
],
paperNumberLeft: 565.5, // 页码 相对当前 面板 的左边距: 单位pt
paperNumberTop: 819, // 页码 相对当前 面板 的上边距: 单位pt
paperNumberContinue: true, // 多面板/模板, 是否页码续排
paperNumberDisabled: true, // 不显示页码
paperNumberFormat: '${paperNo}-${paperCount}', // 页码格式
backgroundColor: '#f1ebff', // 面板的背景颜色
orient: 1, // 打印方向(仅自定义纸张大小): 1-纵向, 2-横向
overPrintOptions: { // 套打功能
content: '', // 套打背景图
opacity: 0.7, // 透明度
type: 1, // 套打类型: 1-仅设计, 2-同时打印
},
watermarkOptions: { // 水印配置
content: 'sv-print', // 水印内容
fillStyle: 'rgba(87, 13, 248, 0.5)', // 水印颜色
fontSize: '36px', // 水印字体大小
rotate: 25, // 水印旋转角度
width: 413, // 水印宽度
height: 310, // 水印高度
timestamp: true, // 是否显示时间戳
format: 'YYYY-MM-DD HH:mm', // 时间戳格式
},
// 排列填充纸张
panelLayoutOptions: {
layoutType: 'column', // 排列方式: column-纵向, row-横向
layoutRowGap: 0, // 垂直间距 单位mm
layoutColumnGap: 0, // 水平间距 单位mm
},
},
{
index: 1,
name: '面板1',
height: 297,
width: 210,
paperHeader: 49.5,
paperFooter: 780,
printElements: [],
}
}
export default templateJson;内置元素类型
示例.js
{
"printElementType": {
"title": "文本",
// 元素的类型, 默认内置的类型:
// text, image, html, hline, vline, rect, oval
// longText, table
"type": "text"
}
}注意
模板中 面板的宽高单位是mm, 元素和其他参数的的单位是pt.
默认内置的元素只有
- 文本(text) (可设置参数,渲染为二维码,条形码)
- 图片(image)
- 长文本(longText) (内容超过面板高度时,会自动分页)
- 表格(table) (内容超过面板高度时,会自动分页)
- html(html)
- 横线(hline)
- 竖线(vline)
- 矩形(rect)
- 椭圆(oval)
如果需要扩展更多的元素, 可以参考插件机制（在新窗口打开）
引入插件后,会自动插入默认 provider 中.
可通过 hiprint.ElementTypes.allElementTypes 查看所有元素类型.
查看支持的元素类型
开发者控制台输入.js
const allTypes = new Set(hiprint.ElementTypes.allElementTypes.map((e) => e.type));
console.log(allTypes);版权所有
版权归属：sv-print