哈喽哇!我是小不 ,不简说的不。在代码世界疯狂蹦跶的 "非资深选手"🙋♂️!主打一个*"踩坑我来,避坑你学"*。毕竟独乐乐不如众乐乐,让大家少走弯路,才是咱的终极使命✨~
sv-print 可视化打印设计器 迎来重大更新!适配移动端啦~ 虽然功能不是很完美,但是确实很能打!
移动端可能不存在设计打印模板的情况,但是~ 有这功能和不用是两回事☺️
更多使用文档,可访问网站www.ibujian.cn/svp查看。
更新日志:
🌈 调整优化 支持触摸事件 & 适配移动端UI



🌈 新增支持 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} 值替换

🌈 新增支持 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.$('<div class="hiprint-printElement-type"></div>');
// xxx
return container;
},
});
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'defaultModule', (list) => {
let container = globalThis.$('<div class="hiprint-printElement-type"></div>');
list.forEach(function (item) {
const box = globalThis.$(`
<div class="draggable-ele-group">
<span class="title">${item.name}</span>
<div class="list"></div>
</div>
`);
const typeList = box.find('.list');
item.printElementTypes.forEach(function (t) {
typeList.append(`
<div class="draggable-ele ep-draggable-item" tid=${t.tid}>
<i class="svicon sv-base sv-${t.type}"></i>
<p style="white-space:nowrap">${t.getText()}</p>
</div>
`);
});
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 显示错误问题