--- theme: devui-blue --- 哈喽哇！我是*小不*，*不简说*的不。在代码世界疯狂蹦跶的 “非资深选手”🙋‍♂️！主打一个\*“踩坑我来，避坑你学”\*。毕竟独乐乐不如众乐乐，让大家少走弯路，才是咱的终极使命✨～ > *sv-print* 可视化打印设计器迎来重大更新！适配移动端啦\~ 虽然功能不是很完美，但是确实很能打！移动端可能不存在设计打印模板的情况，但是\~ 有这功能和不用是两回事☺️ 更多使用文档，可访问网站[ *www.ibujian.cn/svp* ](https://www.ibujian.cn/svp)查看。更新日志： 🌈 调整优化支持触摸事件 & 适配移动端UI ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d790c7e1a03a43deb06758e27d63bce1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN566A6K-0:q75.awebp?rk3s=f64ab15b&x-expires=1757659623&x-signature=Ye3XWZiQ8OtzcQc1ARSHdGARx9c%3D) ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7e1616b597a1469d9f7a4bf7a025da3a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN566A6K-0:q75.awebp?rk3s=f64ab15b&x-expires=1757659623&x-signature=bTPiSNd4dLBVficw3x4voIroOOw%3D) ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dd8e351134be450ab8e2ec6f7d52acd9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN566A6K-0:q75.awebp?rk3s=f64ab15b&x-expires=1757659623&x-signature=YXgW4oM%2BDKiGARgQoep0BbFBpfE%3D) 🌈 新增支持 touchZoom 方法,以适配移动端预览双指缩放 ```js const box = globalThis.$("#preview_content .hiprint-printPaper"); const ww = window.innerWidth - 64; // 64: 边距 const tw = box.width(); const zoom = Math.round((ww / tw) * 100) / 100; box.css({ transform: `scale(${zoom})`, "transform-origin": "0px 0px", }); globalThis.$(box).touchZoom({ minScale: 0.2, maxScale: 6.0, transform: true, // 启用 transform 缩放 }); ``` 🌈 新增支持 `${paperNo} ${paperCount} 和 ${field} 值替换` ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/aa65dab573b34348807e915910981f38~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN566A6K-0:q75.awebp?rk3s=f64ab15b&x-expires=1757659623&x-signature=70%2FTqEcIUwCmRmZMIxvHMIW%2BEWk%3D) 🌈 新增支持 addPrintElementToPaperByTid 根据 tid 添加元素 ```js printTemplate?.addPrintElementToPaperByTid("defaultModule.text"); // 添加到指定位置 pt const left = 10; const top = 30; printTemplate?.addPrintElementToPaperByTid("defaultModule.text", left,top); ``` 🌈 新增支持 providerMap 支持传自定义渲染函数 ```js const providerMap = ref({ container: '.hiprintEpContainer', value: 'defaultModule', render: (list) => { let container = globalThis.$('

'); // xxx return container; }, }); hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'defaultModule', (list) => { let container = globalThis.$('

'); list.forEach(function (item) { const box = globalThis.$(`

${item.name}

`); const typeList = box.find('.list'); item.printElementTypes.forEach(function (t) { typeList.append(`

${t.getText()}

`); }); container.append(box); }); return container; }); ``` 🌈 调整优化 setElsAlign 支持对齐纸张;单项默认对齐纸张, 多选按住 ctrl/command 键可批量对齐 ```js printTemplate?.setElsAlign("left", true); printTemplate?.setElsAlign("right", true); ``` 🌈 调整优化锁定元素禁止调整大小 & 全局配置 disableNoDraggableSize 默认 true ```js hiprint.setConfig({ disableNoDraggableSize: false, // 锁定元素,可编辑属性宽高大小 }) ``` 🌈 调整新增 buildPagination 构建多面板菜单 ```js // 手动构建多面板菜单 printTemplate.buildPagination("#printPanels"); ``` ✨ 优化导出PDF,导出图片部分元素清晰度 & 导出图片支持 quality: 0\~1 ✨ 优化双击编辑功能(可编辑为html) ✨ 优化删除元素逻辑(锁定元素,全选元素) & 右键菜单删除情况 ✨ 优化预览支持设置是否隐藏导出图片,导出PDF以及直接打印按钮 ✨ 优化全选时触发元素选中事件 ✨ 优化 designer 组件传 template 为模板对象时,默认事件处理 ✨ fix setConfig 方法可能导致 tab 显示错误问题