vue-plugin-hiprint 从装环境到落地3 步跑通可视化打印设计【免费下载链接】vue-plugin-hiprinthiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑项目地址: https://gitcode.com/gh_mirrors/vu/vue-plugin-hiprint做业务系统的人大概都踩过同一个坑前端页面调得漂漂亮亮一到打印就原形毕露。表格错位、分页乱跳只能硬凑 HTML 和 CSS。vue-plugin-hiprint 把打印模板做成了可视化设计器左侧拖拽组件、中间画模板、右侧调属性设计完直接拿到模板 JSON接上数据就能打。Vue2 和 Vue3 项目都能用适合单据、标签、报表这类打印场景。装好环境10 分钟看到第一个打印模板环境只有一个硬性要求Node.js 16.x项目 package.json 里写的是16。确认版本后装包node -v # 应为 v16.x npm install vue-plugin-hiprint还有一个容易漏掉的前置动作在项目的 index.html 里引入打印专用样式文件名必须是 print-lock.css且 mediaprintlink relstylesheet typetext/css mediaprint href/print-lock.css /这行是后面排障部分要讲的头号坑的来源现在加上就省事了。接下来在组件里搭最简设计器。设计器是 jQuery 风格 API页面里先要准备三块容器可拖拽元素列表节点带 tid 属性、属性面板容器、模板容器。初始化四步走这段代码直接决定你能不能看到效果import { hiprint, defaultElementTypeProvider } from vue-plugin-hiprint; hiprint.init({ providers: [new defaultElementTypeProvider()], lang: cn }); // 把页面上的拖拽元素注册进来tid 需与 provider 对应 hiprint.PrintElementTypeManager.buildByHtml($(.ep-draggable-item)); const hiprintTemplate new hiprint.PrintTemplate({ template: {}, // 空模板从零开始拖 settingContainer: #PrintElementOptionSetting, // 右侧属性面板容器 paginationContainer: .hiprint-printPagination // 多页签容器可省略 }); hiprintTemplate.design(#hiprint-printTemplate); // 渲染设计器两个关键点design传入的容器就是画板模板最终画在里面buildByHtml必须在design之前执行拖拽列表才有内容。跑起来之后从左侧把文本、图片、表格拖进中间区域右侧面板会实时出现属性编辑项就是下面这个效果打印设计器已经跑起来左侧是拖拽组件列表中间是模板画板右侧是对应元素的属性面板四个真正用得上的能力上面只是把架子立起来下面逐个拆它解决的具体问题。拖拽即所见即所得设计器的价值在于布局不用写一行 CSS。元素拖进来后选中它右侧面板可以直接改字体、字号、对齐、边框、背景色尺寸用鼠标拉。所有改动都落在模板 JSON 里随时可回滚开启history: true后有撤销重做。const tpl new hiprint.PrintTemplate({ template: {}, history: true // 开启撤销重做 });数据绑定{{field}} 与表格 field模板里文本元素填{{name}}这样的占位表格元素绑定一个数组字段打印时传入数据即可。这是设计一次、数据 N 份的核心。const printData { name: 张三, table: [ { id: 1, count: 120, amount: 9089元 }, { id: 2, count: 20, amount: 89元 } ] }; hiprintTemplate.print(printData, {}, { callback: () console.log(打印窗口已打开) });表格行的列定义写在元素的 options 里格式是title#field打印时按 field 取数。模板就是 JSON可存取可下发设计好的模板随时能导出为 JSON存数据库或 localStorage下次用同样的 JSON 新建模板对象画板原样还原。这意味着设计和使用可以分离管理员设计一次业务员只管点打印。// 导出 const json hiprintTemplate.getJson(); localStorage.setItem(tpl, JSON.stringify(json)); // 还原 const saved JSON.parse(localStorage.getItem(tpl)); const tpl2 new hiprint.PrintTemplate({ template: saved });九种语言一个参数界面文案在init时通过 lang 指定支持 cn、en、de、es、fr、it、ja、ru、cn_tw 共 9 种语言包就在仓库的 src/i18n 目录想改文案可直接编辑后重新打包。hiprint.init({ providers: [new defaultElementTypeProvider()], lang: en // 默认为 cn });实战把一张工程单模板做进业务系统光会拖还不够拿一个真实单据过一遍完整链路。场景是一家工厂要打印工程单顶部公司名加订单编号和二维码中间两张产品明细表格底部制单人和打印时间。仓库自带的 template4 就是这种单子的效果目标效果一张工程单包含订单信息、两张产品明细表格、二维码与制单人签名区分四步。第一步还是初始化但这次模板 JSON 是现成的比如存库后取出来跳过拖拽直接渲染import { hiprint, defaultElementTypeProvider } from vue-plugin-hiprint; hiprint.init({ providers: [new defaultElementTypeProvider()] }); // 从接口拿到的模板 JSON const tplJson await fetch(/api/template/engineer).then(r r.json()); const tpl new hiprint.PrintTemplate({ template: tplJson });注意这里没有design——只打印、不编辑时创建模板对象就够了更省 DOM。第二步打印数据按模板里的字段名组织。明细表是数组每张表的列名与表头一一对应const printData { companyName: XXXX有限公司, orderNo: XY202304001, projectNo: GLSW2023001, customer: 广州戈蓝生物科技有限公司, date: 2023-06-03, products: [ { type: 面纸, name: 350克冰白珠光纸, size: 787*830, qty: 1400, craft: 哑胶 }, { type: 内盒卡纸, name: 350克单铜, size: 787*830, qty: 2300, craft: 击凸 } ] };第三步先走浏览器预览确认版式tpl.print(printData, {}, { callback: () console.log(预览窗口已打开) });预览无误后接客户端就可以静默直接打印不再弹出系统对话框。print2传数组就是批量// 打印机名从 hiwebSocket.printerList 里取 name tpl.print2(printData, { printer: 工程单打印机, title: 工程单打印 }); tpl.print2(batchData, { printer: 工程单打印机, copies: 2 }); tpl.on(printSuccess, res console.log(完成, res)); tpl.on(printError, err console.error(失败, err));到这里设计器负责长什么样业务代码只负责喂数据两边通过字段名解耦。改版式不用动业务代码换数据不用重开设计器。五个高频坑与修法跑通之后下面五个问题出现频率最高按现象对号入座。坑 1打印时版式错乱、元素重叠。原因是 index.html 没引 print-lock.css或忘了mediaprint。浏览器打印只加载 print 媒体下的样式缺了它模板定位全部失效。修复就是回到第一节那行 link文件放 public 目录、文件名保持 print-lock.css。坑 2控制台持续刷 socket 连接报错。插件内置了 socket.io-client加载即尝试连接客户端没装客户端或客户端是官网老版本socket.io 2.x就会报错。本地不打印就关掉import { disAutoConnect } from vue-plugin-hiprint; disAutoConnect();要打印则使用本仓库配套的 electron-hiprint 客户端见 apiDoc.md不要混用官网老客户端模板格式对不上。坑 3拖拽列表是空的组件拖不进去。buildByHtml靠 DOM 节点的 tid 属性识别元素节点没写 tid、tid 与 provider 对不上、或者先调了 design 再调 buildByHtml都会导致拖不出东西。检查顺序tid 正确 → buildByHtml 在 design 之前。坑 4本地能连客户端线上连不上。客户端默认监听 http://localhost:17521线上页面是 https浏览器直接拦截混合连接。两条路站点升级 https 后直连内网地址或挂 node-hiprint-transit 中转服务此时 print2 必须额外传 client 指定客户端hiprint.init({ host: https://your-transit:17521, token: hiprint-xxx }); tpl.print2(printData, { client: clientId, printer: 打印机名, title: 任务名 });坑 5print2 不报错但不出纸。先确认客户端已启动主窗口显示打印服务已启动再确认 printer 传的是hiwebSocket.printerList里真实的 name手写名称差一个空格都会匹配失败。改源码或加自定义元素从这里入手主分支就是把 hiprint 源码融进仓库的 npm 包源码动手前先看这几个目录src/hiprint/hiprint.bundle.js核心打印引擎模板、分页、元素渲染都在这里src/hiprint/etypes/default-etyps-provider.js默认元素类型定义加新元素从这仿一个src/demo/design/官方拖拽设计器 demo页面结构、JSON 导入导出的完整参考src/i18n/9 种语言包自定义元素走 provider 扩展demo 里给了现成范式src/demo/panels/providers.jsclass MyProvider extends defaultElementTypeProvider { getPrintElements() { const base super.getPrintElements(); return [...base, { tid: custom, title: 自定义, elements: [{ tid: signature, title: 签字区, type: text }] }]; } }注册进hiprint.init的 providers 即可在拖拽列表里看到签字区。写在最后拖拽设计组件拖进画板布局零 CSS模板 JSON设计一次随数据批量复用静默打印客户端直连批量任务不弹窗多语言9 种界面语言一个参数切换双框架Vue2 / Vue3 通用纯 JS 引擎仓库地址 https://gitcode.com/gh_mirrors/vu/vue-plugin-hiprint clone 下来npm i npm run serve打开 demo把今天这条链路自己再走一遍。【免费下载链接】vue-plugin-hiprinthiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑项目地址: https://gitcode.com/gh_mirrors/vu/vue-plugin-hiprint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 vue-plugin-hiprint 从装环境到落地：3 步跑通可视化打印设计
vue-plugin-hiprint 从装环境到落地3 步跑通可视化打印设计【免费下载链接】vue-plugin-hiprinthiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑项目地址: https://gitcode.com/gh_mirrors/vu/vue-plugin-hiprint做业务系统的人大概都踩过同一个坑前端页面调得漂漂亮亮一到打印就原形毕露。表格错位、分页乱跳只能硬凑 HTML 和 CSS。vue-plugin-hiprint 把打印模板做成了可视化设计器左侧拖拽组件、中间画模板、右侧调属性设计完直接拿到模板 JSON接上数据就能打。Vue2 和 Vue3 项目都能用适合单据、标签、报表这类打印场景。装好环境10 分钟看到第一个打印模板环境只有一个硬性要求Node.js 16.x项目 package.json 里写的是16。确认版本后装包node -v # 应为 v16.x npm install vue-plugin-hiprint还有一个容易漏掉的前置动作在项目的 index.html 里引入打印专用样式文件名必须是 print-lock.css且 mediaprintlink relstylesheet typetext/css mediaprint href/print-lock.css /这行是后面排障部分要讲的头号坑的来源现在加上就省事了。接下来在组件里搭最简设计器。设计器是 jQuery 风格 API页面里先要准备三块容器可拖拽元素列表节点带 tid 属性、属性面板容器、模板容器。初始化四步走这段代码直接决定你能不能看到效果import { hiprint, defaultElementTypeProvider } from vue-plugin-hiprint; hiprint.init({ providers: [new defaultElementTypeProvider()], lang: cn }); // 把页面上的拖拽元素注册进来tid 需与 provider 对应 hiprint.PrintElementTypeManager.buildByHtml($(.ep-draggable-item)); const hiprintTemplate new hiprint.PrintTemplate({ template: {}, // 空模板从零开始拖 settingContainer: #PrintElementOptionSetting, // 右侧属性面板容器 paginationContainer: .hiprint-printPagination // 多页签容器可省略 }); hiprintTemplate.design(#hiprint-printTemplate); // 渲染设计器两个关键点design传入的容器就是画板模板最终画在里面buildByHtml必须在design之前执行拖拽列表才有内容。跑起来之后从左侧把文本、图片、表格拖进中间区域右侧面板会实时出现属性编辑项就是下面这个效果打印设计器已经跑起来左侧是拖拽组件列表中间是模板画板右侧是对应元素的属性面板四个真正用得上的能力上面只是把架子立起来下面逐个拆它解决的具体问题。拖拽即所见即所得设计器的价值在于布局不用写一行 CSS。元素拖进来后选中它右侧面板可以直接改字体、字号、对齐、边框、背景色尺寸用鼠标拉。所有改动都落在模板 JSON 里随时可回滚开启history: true后有撤销重做。const tpl new hiprint.PrintTemplate({ template: {}, history: true // 开启撤销重做 });数据绑定{{field}} 与表格 field模板里文本元素填{{name}}这样的占位表格元素绑定一个数组字段打印时传入数据即可。这是设计一次、数据 N 份的核心。const printData { name: 张三, table: [ { id: 1, count: 120, amount: 9089元 }, { id: 2, count: 20, amount: 89元 } ] }; hiprintTemplate.print(printData, {}, { callback: () console.log(打印窗口已打开) });表格行的列定义写在元素的 options 里格式是title#field打印时按 field 取数。模板就是 JSON可存取可下发设计好的模板随时能导出为 JSON存数据库或 localStorage下次用同样的 JSON 新建模板对象画板原样还原。这意味着设计和使用可以分离管理员设计一次业务员只管点打印。// 导出 const json hiprintTemplate.getJson(); localStorage.setItem(tpl, JSON.stringify(json)); // 还原 const saved JSON.parse(localStorage.getItem(tpl)); const tpl2 new hiprint.PrintTemplate({ template: saved });九种语言一个参数界面文案在init时通过 lang 指定支持 cn、en、de、es、fr、it、ja、ru、cn_tw 共 9 种语言包就在仓库的 src/i18n 目录想改文案可直接编辑后重新打包。hiprint.init({ providers: [new defaultElementTypeProvider()], lang: en // 默认为 cn });实战把一张工程单模板做进业务系统光会拖还不够拿一个真实单据过一遍完整链路。场景是一家工厂要打印工程单顶部公司名加订单编号和二维码中间两张产品明细表格底部制单人和打印时间。仓库自带的 template4 就是这种单子的效果目标效果一张工程单包含订单信息、两张产品明细表格、二维码与制单人签名区分四步。第一步还是初始化但这次模板 JSON 是现成的比如存库后取出来跳过拖拽直接渲染import { hiprint, defaultElementTypeProvider } from vue-plugin-hiprint; hiprint.init({ providers: [new defaultElementTypeProvider()] }); // 从接口拿到的模板 JSON const tplJson await fetch(/api/template/engineer).then(r r.json()); const tpl new hiprint.PrintTemplate({ template: tplJson });注意这里没有design——只打印、不编辑时创建模板对象就够了更省 DOM。第二步打印数据按模板里的字段名组织。明细表是数组每张表的列名与表头一一对应const printData { companyName: XXXX有限公司, orderNo: XY202304001, projectNo: GLSW2023001, customer: 广州戈蓝生物科技有限公司, date: 2023-06-03, products: [ { type: 面纸, name: 350克冰白珠光纸, size: 787*830, qty: 1400, craft: 哑胶 }, { type: 内盒卡纸, name: 350克单铜, size: 787*830, qty: 2300, craft: 击凸 } ] };第三步先走浏览器预览确认版式tpl.print(printData, {}, { callback: () console.log(预览窗口已打开) });预览无误后接客户端就可以静默直接打印不再弹出系统对话框。print2传数组就是批量// 打印机名从 hiwebSocket.printerList 里取 name tpl.print2(printData, { printer: 工程单打印机, title: 工程单打印 }); tpl.print2(batchData, { printer: 工程单打印机, copies: 2 }); tpl.on(printSuccess, res console.log(完成, res)); tpl.on(printError, err console.error(失败, err));到这里设计器负责长什么样业务代码只负责喂数据两边通过字段名解耦。改版式不用动业务代码换数据不用重开设计器。五个高频坑与修法跑通之后下面五个问题出现频率最高按现象对号入座。坑 1打印时版式错乱、元素重叠。原因是 index.html 没引 print-lock.css或忘了mediaprint。浏览器打印只加载 print 媒体下的样式缺了它模板定位全部失效。修复就是回到第一节那行 link文件放 public 目录、文件名保持 print-lock.css。坑 2控制台持续刷 socket 连接报错。插件内置了 socket.io-client加载即尝试连接客户端没装客户端或客户端是官网老版本socket.io 2.x就会报错。本地不打印就关掉import { disAutoConnect } from vue-plugin-hiprint; disAutoConnect();要打印则使用本仓库配套的 electron-hiprint 客户端见 apiDoc.md不要混用官网老客户端模板格式对不上。坑 3拖拽列表是空的组件拖不进去。buildByHtml靠 DOM 节点的 tid 属性识别元素节点没写 tid、tid 与 provider 对不上、或者先调了 design 再调 buildByHtml都会导致拖不出东西。检查顺序tid 正确 → buildByHtml 在 design 之前。坑 4本地能连客户端线上连不上。客户端默认监听 http://localhost:17521线上页面是 https浏览器直接拦截混合连接。两条路站点升级 https 后直连内网地址或挂 node-hiprint-transit 中转服务此时 print2 必须额外传 client 指定客户端hiprint.init({ host: https://your-transit:17521, token: hiprint-xxx }); tpl.print2(printData, { client: clientId, printer: 打印机名, title: 任务名 });坑 5print2 不报错但不出纸。先确认客户端已启动主窗口显示打印服务已启动再确认 printer 传的是hiwebSocket.printerList里真实的 name手写名称差一个空格都会匹配失败。改源码或加自定义元素从这里入手主分支就是把 hiprint 源码融进仓库的 npm 包源码动手前先看这几个目录src/hiprint/hiprint.bundle.js核心打印引擎模板、分页、元素渲染都在这里src/hiprint/etypes/default-etyps-provider.js默认元素类型定义加新元素从这仿一个src/demo/design/官方拖拽设计器 demo页面结构、JSON 导入导出的完整参考src/i18n/9 种语言包自定义元素走 provider 扩展demo 里给了现成范式src/demo/panels/providers.jsclass MyProvider extends defaultElementTypeProvider { getPrintElements() { const base super.getPrintElements(); return [...base, { tid: custom, title: 自定义, elements: [{ tid: signature, title: 签字区, type: text }] }]; } }注册进hiprint.init的 providers 即可在拖拽列表里看到签字区。写在最后拖拽设计组件拖进画板布局零 CSS模板 JSON设计一次随数据批量复用静默打印客户端直连批量任务不弹窗多语言9 种界面语言一个参数切换双框架Vue2 / Vue3 通用纯 JS 引擎仓库地址 https://gitcode.com/gh_mirrors/vu/vue-plugin-hiprint clone 下来npm i npm run serve打开 demo把今天这条链路自己再走一遍。【免费下载链接】vue-plugin-hiprinthiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑项目地址: https://gitcode.com/gh_mirrors/vu/vue-plugin-hiprint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考