框架无关
标准 Web Components(Custom Elements)。Vue / React / Angular / 原生 HTML 直接写
不装 npm、不写构建、不接后端 —— 浏览器直接进设计器。线上这份与 SDK 内置设计器同源,可以拿来评估「能不能干我的活」,也可以拿来先排好版、导出 JSON 再落到自己系统里。
// ① 启动时配一次:把你的后端 / 请求器接进来
import axios from 'axios'
import { configurePrintKit, createHttpPrintAdapter } from 'openprint26'
configurePrintKit({
adapter: createHttpPrintAdapter({ request: (cfg) => axios.request(cfg).then((r) => r.data) }),
licenseKey: 'eyJkYXRh...', // 不配 = 试用模式
})
// ② 设计模板:全系统一个页面,零胶水代码
// <print-designer-page style="height:100vh" />
router.push('/system/print/designer?bizCode=PURCHASE_IN&tplCode=TPL_001')
// ③ 出纸:一行
import { quickPrint } from 'openprint26'
quickPrint('PURCHASE_IN', row.id)用户在你的系统里点开一张已存在的单据模板时,把后端 JSON 直接铺进画布:
import { defineDesignerHost } from 'openprint26'
const tpl = await myApi.getTemplate('TPL_001')
defineDesignerHost({
// 启动时自动载入,并接管 id / 名称(后续保存走 update)
initialTemplate: { id: tpl.id, name: tpl.name, data: tpl.json },
onSave: async ({ id, name, templateJson, action }) => {
const saved = await myApi.saveTemplate({ id, name, json: templateJson, action })
return { id: saved.id } // ★ 必须回传 id,否则每次保存都新建一条
},
})templateJson 是压缩版(无缩进)画布 JSON,比格式化版省约 45% 存储; 需要可读或二次加工则用 template(对象)。
每个字段的用法与案例见 API 总览 →。
适合谁
你是做 ERP / MES / WMS / 医疗 / 财务 / 物流 软件的团队?想把「报表 + 标签打印」做成自己产品里的一项能力, 又不想从零自研设计器、模板存储、打印驱动——OpenPrint 就是为这种「独立交付」场景设计的。
foodbooking
为民科技
列国志食品
千机汇查
吉帝汽车以上 logo 均已获相关企业授权展示。