模板json数据格式

模板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, // 多面板/模板, 是否页码续排
            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", // 时间戳格式
            },
        },
        {
            index: 1,
            name: '面板1',
            height: 297,
            width: 210,
            paperHeader: 49.5,
            paperFooter: 780,
            printElements: [],
        },
}

注意

模板中面板的宽高单位是 mm, 元素和其他参数的的单位是 pt.

默认的元素只有

• 文本 (可设置参数,渲染为二维码,条形码)
• 图片
• 长文本 (内容超过面板高度时,会自动分页)
• 表格 (内容超过面板高度时,会自动分页)
• html
• 横线
• 竖线
• 矩形
• 椭圆

如果需要扩展更多的元素, 可以参考插件机制