这次真香！sv-print 可视化打印设计器更新：插件脚手架、Excel 导出、弹窗 API 三连发

哈喽哇！我是小不 ，不简说的不～

六月刚开始，sv-print 就连发两个版本，更新列表长得跟菜单似的，一屏都放不下 😂

这次更新有多猛？一行命令创建插件工程 、设计器内置 3 大弹窗 API 、原生导出 Excel 、参数自定义修改插件......随便拎一个出来都能单独写一篇。

今天这期，主打一个炸------插件脚手架、弹窗 API、Excel 导出、样式优化，两大版本的更新一个不落全给你捋明白。代码示例管够，看完直接起飞，建议收藏慢慢消化 🚀

---

🌈 06-01 大版本：功能爆炸

版本号

sv-print@0.2.20
@sv-print/hiprint@0.3.29
@sv-print/plugin-options-modify@0.1.1
@sv-print/plugin-api-excel@0.1.1
@sv-print/plugin-ele-shtml@0.1.12
@sv-print/plugin-ele-bwip-js@0.1.20
@sv-print/plugin-api-image@0.2.4
@sv-print/plugin-api-pdf@0.2.5
@sv-print/plugin-api-pdf3@0.2.5
@sv-print/vue3@0.2.4
@sv-print/vue@0.2.4
@sv-print/react@0.2.4

---

1. 插件脚手架：一行命令创建插件

说三遍：不用手动搭项目了！不用手动搭项目了！不用手动搭项目了！🎉

新增 create-sv-print-plugin CLI，一行命令搞定插件工程：

npx create-sv-print-plugin init

💡 为什么需要这个？

以前开发 sv-print 插件，你得自己搭项目结构、配 TypeScript、处理打包、写导出......一套流程下来半小时起步。现在一行命令，项目结构、构建配置、示例代码全给你生成好，你只管写业务逻辑就行。

🎯 实际业务场景：

比如你们公司需要一个自定义条码插件，对接内部编码规则。以前得先研究 sv-print 插件的目录结构和导出规范，现在 npx create-sv-print-plugin init 一敲，改改 index.ts 就能跑起来。

---

2. 设计器 3 大弹窗 API

这次直接内置了 3 种弹窗，再也不用自己写 UI 了 👏

💡 为什么需要这个？

之前想在设计器里弹个确认框、填个表单，得自己引入 UI 库或者手写 DOM，跟设计器的交互割裂感很强。现在 designerUtils 直接内置，弹窗样式跟设计器统一，调用方式也一致。

🎯 实际业务场景：

• showModal：用户点"新建模板"时弹确认框，防止误操作清空当前设计
• showFormModal：保存模板时让用户输入 key 和名称，自带表单校验
• showCustomModal：展示本地模板列表，支持自定义渲染缩略图卡片

提示弹窗：

designerUtils.showModal({
  title: "温馨提示",
  content: "当前设计内容将清空，是否继续新建",
  submitText: "确认",
  submit: (close) => {
    // autoClose:false 时 执行 close() 手动关闭弹窗
  },
  autoClose: true,
  showCancel: true,
  cancelText: "取消",
  drag: true, // 可拖拽
});

自定义表单弹窗：

designerUtils.showFormModal({
  title: "新建模板",
  desc: "用于保存到本地，导出名称",
  schema: [
    {
      key: "templateKey",
      label: "模板key",
      defaultValue: "default-template",
      type: "text", // text | number | email | password | textarea | select | custom
      required: true,
      minLength: 2,
    },
    {
      key: "title",
      label: "模板名称",
      defaultValue: "默认模板",
      type: "text",
      required: true,
    },
  ],
  submit: (data, close) => {
    console.log("提交数据", data);
    close();
  },
});

自定义渲染弹窗：

自由渲染 DOM，想怎么玩怎么玩

designerUtils.showCustomModal({
  title: "本地模板列表",
  desc: "本地缓存的模板，你完全可自定义这个功能",
  modalStyle: "max-width:60vw;",
  render: function (target, close) {
    // 自由渲染 DOM，想怎么玩怎么玩
    $(target).append("<div>你的内容</div>");
  },
  showFooter: false,
});

---

3. 设计器 Header 内置菜单

新增新建模板 和本地模板列表 两个内置菜单，开箱即用。同时 hook onPreview 执行时机也做了优化，回调 root, designerUtils, options 三个参数。

---

4. 保存为自定义元素

选中元素 → 右键菜单 → 保存为自定义元素，快捷键 Ctrl/⌘+S。

💡 为什么需要这个？

设计好的元素（比如一个带 logo 的地址栏），想复用到其他模板里，以前只能手动查看重新定义provider。现在右键保存为自定义元素，导出 provider JSON，下次下次直接从左侧拖出来用。

// 编辑保存的自定义元素 json
designerUtils.editCustomPrintElementJson(json);

还支持 onAddCustomFun 和 onBeforeAddCustomFun 两种钩子，灵活度拉满。

---

5. provider 增强：providerJson + providerRender

现在可以直接传递 JSON 和渲染函数来构建 provider，不用手动拼 DOM 了。

💡 为什么需要这个？

之前自定义左侧拖拽元素列表，得自己写 provider 传递初始化。自定义样式需要自己拼DOM，代码又长又难维护。现在传个 JSON 配置 + 可选的渲染函数就行，声明式写法，清晰多了。

<template>
  <Designer :providerJson="providerJson" :providerRender="providerRender" />
</template>

还新增了 provider JSON 的导入导出：

// 导出
const json = hiprint.ElementTypes.getProviderJson();
// 导入(会先清空)
hiprint.ElementTypes.setProviderJson(json);
// 新增(不会清空)
hiprint.ElementTypes.addProviderJson([...]);
// 插入单个元素
hiprint.ElementTypes.insertPrintElementType(json, "defaultModule", "分组名称", 1);

🎯 实际业务场景：

多租户 SaaS 系统，不同租户需要不同的可拖拽元素列表。把 providerJson 存到后端，前端根据登录租户动态加载，一套代码搞定多套模板元素。

---

6. plugin-options-modify 插件

支持用 vue、react、svelte 组件来自定义修改设计器参数。再也不用对着下拉框干瞪眼了 😂

💡 为什么需要这个？

设计器内置的参数控件是固定的（下拉框、输入框、颜色选择器），但实际业务中经常需要自定义------比如字体大小用数字输入框而不是下拉列表，字重用 100-900 的步进器。这个插件让你能用任何框架组件替换默认控件。

import pluginOptionsModify, {
  getSelectToInputModifyHandler,
  InputValueGetHandler,
  InputValueSetHandler,
} from "@sv-print/plugin-options-modify";

const plugins = [
  pluginOptionsModify({
    list: [
      {
        optionNames: ["fontSize", "lineHeight"],
        modifyHandler: getSelectToInputModifyHandler(
          `<input type="number" value="1" step="1" min="1" class="auto-submit"/>`,
        ),
        setValueHandler: (item, value) => {
          InputValueSetHandler(item, value || 9);
        },
        getValueHandler: InputValueGetHandler,
      },
    ],
  }),
];

---

7. plugin-api-excel 插件：导出 Excel

终于！原生支持导出 Excel 了 🎉

💡 为什么需要这个？

打印模板设计好了，但有时候用户不一定要纸质版，他们想导出 Excel 做二次编辑、发邮件、或者导入其他系统。以前只能自己对接 ExcelJS 之类的库，现在一行代码搞定，渲染逻辑跟打印完全复用。

🎯 实际业务场景：

• 物流单据：用户设计好发货单模板，一键导出 Excel 给财务对账
• 报表场景：同一套模板，既能打印也能导出 Excel，不用维护两套逻辑

await printTemplate.toExcel(printData, {
  isDownload: true,
  name: "sv-print",
  pixelRatio: 2,
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log("toExcel 进度", percent);
  },
  fontName: "Microsoft YaHei",
  fontSize: 10,
  sheetName: "Sheet",
});

---

8. shtml 插件优化

新增整体节点过滤函数，自定义 div 视为整体避免元素分离。bwip-js 条码插件也做了类型分组优化，内置支持更多条形码/二维码类型。

---

9. 导出 PDF/图片插件增强

plugin-api-pdf3、plugin-api-pdf、plugin-api-image 全部适配多面板不同尺寸 + box 子模板插件。

---

10. 表格新增"允许超出高度"参数

优先级大于"允许超出行高"，分页控制更精细。

---

11. 其他值得关注的更新

功能	说明
toolbar API 增强	getHasSelectEls()、getTools()、updateTools()、getToolByKey()、getDragBoxList()、updateDragBoxList()
designerUtils API 增强	newTemplate()、openTemplateList()、save()、editPrintElementJson()、newPrintTemplate()
面板属性	支持修改面板名称，过滤不必要参数
模板 update 功能	优化
表格聚合	合并列数自动处理后面的列
jq 右键菜单	功能优化
DragBox	支持 showOtherIcon、otherIconRender 参数
provider 创建元素	text/longText 赋值取 options.title

---

🌈 06-06 微调版：样式优化

版本号

sv-print@0.2.21
@sv-print/hiprint@0.3.30
@sv-print/plugin-options-modify@0.1.2
@sv-print/plugin-i18n@0.1.6

更新内容

类型	内容
🌈 新增	表格脚行高属性
✨ 优化	组件样式（tailwindcss 样式冲突优化）& 减少冗余
✨ 优化	header 菜单支持 childrenStyle 样式参数
✨ 优化	plugin-options-modify 插件
✨ 优化	plugin-i18n 插件
✨ 优化	表格表头背景色、字体等样式问题

tailwindcss 样式冲突这个问题...踩过的人都懂，终于修了 😭

---

🐛 Bug 修复

问题	修复
页码续排在子模板情况下渲染问题	✅
表格头样式函数部分参数无效	✅
表头行高设置无效	✅
getJson 返回的表格列丢失隐藏列	✅

---

写到最后

两个版本，十几项更新，插件脚手架 + 三大弹窗 API + Excel 导出，属实是把用户体验拉满了。

尤其那个 create-sv-print-plugin，一行命令创建插件工程，以后写插件再也不用从零搭了，直接起飞 🚀

有问题评论区见，解决不了算我输！🎯

整理时间：2026-06-07 覆盖版本：sv-print@0.2.20 ~ 0.2.21 原始更新日志：sv-print 更新日志