模板json格式
温馨提示
一定,一定要先清楚模板json数据的格式! 理解清楚了格式,才能少走弯路!
这个数据, 是用来生成模板的. 所以, 一定要理解清楚!
这个数据, 可用于动态创建自定义模板, 也是导入导出的模板数据.
{
// 面板, 支持多面板
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: [],
}
}注意
模板中面板的宽高单位是 mm, 元素和其他参数的的单位是 pt.
默认的元素只有
- 文本 (可设置参数,渲染为二维码,条形码)
- 图片
- 长文本 (内容超过面板高度时,会自动分页)
- 表格 (内容超过面板高度时,会自动分页)
- html
- 横线
- 竖线
- 矩形
- 椭圆
如果需要扩展更多的元素, 可以参考