拖拽DIY表格插件来了!sv-print 七月更新:这次真的能自己拼表格了

哈喽哇!我是小不不简说的不~

七月刚开始,sv-print 又带着新版本冲过来了------拖拽DIY表格插件静默打印客户端升级表格分页逻辑优化水印支持变量替换...... 属实是把"卷"字写在了脸上 😂

这次更新有多顶?就这么说吧:之前拼个表格得手动写 provider、算列宽、调边框;现在拖一拖、拽一拽 ,合并、边框、图片、二维码想插就插,跟搭积木似的,主打一个省头发

今天这期,主打一个实用------主菜是 7-09 的插件合集,配菜是 6-30 客户端大版本和 6-29 / 6-15 的小修小补。代码示例管够,建议收藏慢慢看 🚀


🌈 07-09 主菜:拖拽DIY表格插件上线

版本号

less 复制代码
@sv-print/hiprint@0.3.35
@sv-print/plugin-ele-stable@0.1.1
@sv-print/plugin-api-image@0.2.5

1. stable 插件:拖拽DIY表格

说三遍:能自己拼表格了!能自己拼表格了!能自己拼表格了!🎉

新增 @sv-print/plugin-ele-stable 插件,支持拖拽DIY表格,包含合并、边框、图片、二维码或自定义元素的插入。

💡 为什么需要这个?

之前想搞个复杂点的表格(比如表头合并、单元格内嵌二维码),你得:写 provider → 定义列 → 手动加合并 → 自己塞图片......一套流程下来,半天过去了,头发也掉了。现在这个插件直接给你个"画布",拖就完事儿了,效率直接起飞 ✈️

🎯 实际业务场景:

  • 合同模板:表头合并 + 单元格内嵌签字区 + 二维码扫码下载电子版
  • 物流面单:自定义边框 + 多列图片 + 任意合并单元格
js 复制代码
import pluginEleStable from "@sv-print/plugin-ele-stable";

let plugins = [
  pluginEleStable({
    // showDesign: false, // 是否显示设计按钮
    // onDesignClick: (json, callback) => { callback(json); },
    // designerOptions: { title: "表格设计" },
    styleOptions: {
      defaultCellHeight: 32, // 默认单元格高度(px)
      defaultCellWidth: 90, // 默认单元格宽度(px)
    },
    // 插入数据前的回调: 可自定义/编辑要插入的内容(可异步)
    onInsert: (ctx, done) => {
      // ctx: { type, cell, defaultContent }
      if (ctx.type === "image") {
        const url = window.prompt("请输入图片地址", ctx.defaultContent);
        done(url == null ? undefined : url);
      } else {
        done(); // 使用默认/内置行为
      }
    },
    customTypes: [
      {
        type: "signature",
        label: "签名区",
        defaultContent: "签字:",
        lang: "text",
        render: (cell) =>
          `<div style="width:100%;"><div>${
            cell.content || ""
          }</div><div style="display:inline-block;border-bottom:1px solid #000;min-width:80px;height:2px;"></div></div>`,
      },
    ],
  }),
];

✨ 这个插件最骚的几个点:

  • 自定义元素customTypes 随便加,比如签名区、水印、二维码,想怎么玩怎么玩
  • 异步插入onInsert 支持异步,给个 loading 状态再回调,体验拉满
  • 样式可配styleOptions 控制默认单元格宽高,再也不用手动改 JSON
  • 设计按钮可控showDesign + onDesignClick 双管齐下,要权限有权限,要回调有回调

2. 面板设置:基础元素允许超出页脚分页高度

新增面板设置 支持基础元素超出页脚分页高度 ,还支持全局设置 config diffPaperFooter

💡 为什么需要这个?

之前如果一个元素不小心超出了页脚位置,直接就被截断了,但实际场景下(比如签字栏、价格备注),它就是该超出来才合理。这个更新就是给"非主流布局"开了个口子 😎

js 复制代码
// 全局配置
hiprint.setConfig({
  diffPaperFooter: true, // 允许基础元素超出页脚分页高度
});

3. 显示/隐藏 规则优化

🎯 实际业务场景:

之前做"分页时显隐"逻辑的时候,最后一页经常出现奇怪的空白或者重复元素。这次优化后,尾页分页处理更智能了,逻辑更符合直觉。


🌈 06-30 配菜:静默打印客户端大版本

sv-print 静默打印客户端@2.0.8

安装包下载:pan.quark.cn/s/428f36751...

这个版本我愿称之为"终于等到你"系列 😭

🌈 新增 支持 自定义渲染器 在线更新。

不用每次改个渲染器都得打包重发客户端了,在线更新它不香吗?🚀

🌈 新增 支持 socket服务 https 开关设置 和 http 服务开关设置。

https 和 http 都能开了,安全这块直接拉满。

🌈 新增 sv-print:// 协议打开客户端。

对,你没看错,跟 vscode:// 一个套路,可以在浏览器里直接拉起客户端了。

js 复制代码
// 例如: sv-print://route?page=/setting&query=tabIndex=1
// 将对象转为查询字符串
const queryString = new URLSearchParams({ tabIndex: 1 }).toString();
const encodedQuery = encodeURIComponent(queryString); // 对整个 query 值进行编码
const url = `sv-print://route?page=${encodeURIComponent("/settings")}&query=${encodedQuery}`;
// 支持的路由
const routes = {
  "/desktop": "首页",
  "/templates": "模板中心",
  "/printer": "打印机",
  "/history": "打印日志",
  "/settings": "设置",
};

⚠️ 注意:query 一定要记得 URL 编码! 不然参数里有 = & 啥的,直接给你解析乱。别问我是怎么知道的 🙃

🌈 优化 新增 应用内更新开关 地址配置。

升级更灵活,自己控制更新策略。

🌈 优化 托盘菜单新增设置、显示渲染窗口、软件日志、渲染器资源等入口。

之前要找日志得翻文件夹,现在右键托盘就能开,开发者友好度直接 +100

🌈 优化 显示 连接数量数据 & 新增 获取连接信息、连接数量的 API。

js 复制代码
// http 服务方式 (get)
// 连接数量
const url = `https://127.0.0.1:7071/printer/clientsCount`;
// 连接信息
const url = `https://127.0.0.1:7071/printer/clients`;

🌈 新增 pdfPrintMethod: 2 使用新的pdf打印处理器。

PDF 打印性能/兼容性升级。

✨ 优化 拖入 自定义渲染器、配置文件 时 提示是否重启应用。

这个交互真的太重要了,不然改完配置一脸懵:咋没生效?哦原来要重启 😂

✨ 优化 应用设置 保存逻辑(无需重启应用,重启服务相关配置)。

大部分配置热生效,省去重启步骤。

✨ 优化 打包体积。

体积更小,启动更快。


🌈 06-29 小修小补:核心库优化

版本号

perl 复制代码
sv-print@0.2.22
@sv-print/hiprint@0.3.33
create-sv-print-plugin@0.1.1

新增开源仓库:open-sv-print 了解如何创建插件,丰富生态。

想自己写插件的兄弟姐妹们,可以去 star 一下了 ⭐

🌈 优化 水印功能 支持 html字符串, ${xxx}。

水印也能写变量了,比如 ${userName} 的专属文档,方便得一逼。

重点是支持html字符串! 支持html字符串! 支持html字符串! 整个 logo 不过分吧😁

🌈 优化 表格分页逻辑 & 移除 允许超出行高 参数。

⚠️ 破坏性更新提醒:旧版本的"允许超出行高"参数被移除了,升级前记得检查一下模板配置 🙏

🌈 优化 表格 表头合并逻辑。

表头合并更稳了,之前那种奇葩合并方式终于能好好渲染了。

🌈 优化 面板 扩展样式,字体参数的处理。

样式这块儿一直是个老大难,这次又优化了一波。

🌈 新增 beforeGetHtml hook。

又多了个 hook,能做的事情又多了一个量级 ✅


🌈 06-15 插件微调

版本号

less 复制代码
@sv-print/plugin-ele-shtml@0.1.14
@sv-print/plugin-api-excel@0.1.1
  • 🌈 优化 shtml 插件:整体节点过滤功能。
  • ✨ fix shtml 插件:字段名数据无效问题。
  • ✨ 优化 兼容 api-excel 插件:预览时插入导出按钮。

shtml 插件是啥?简单说就是把任意 HTML 塞进打印模板的神器,这次稳定性又上了一层楼 📈


🐛 Bug 修复清单

问题 修复
表格 表头列宽句柄 缩放时偏移问题
单页 导出图片 bug
保存到本地 打印数据错误问题
部分样式问题
部分UI 问题

列表越来越短,说明代码越来越稳。这是好事儿,省事儿了 😂


写到最后

四个版本,十几项更新。从拖拽DIY表格自定义渲染器在线更新 ,从水印变量shtml 插件优化,sv-print 这一波属实是把"开发者体验"卷出了新高度。

尤其那个 stable 插件,之前拼表格的痛苦终于解脱了,拖拽一下午搞定的事情,现在十分钟收工------省下来的时间,摸鱼不香吗?🐟

有问题评论区见,解决不了算我输!🎯

整理时间:2026-07-13 覆盖版本:@sv-print/hiprint@0.3.33 ~ 0.3.35,sv-print@0.2.22,静默打印客户端@2.0.8 原始更新日志:sv-print 更新日志

相关推荐
To_OC2 小时前
面试被问了三回三栏布局,这次我终于把 BFC 那层窗户纸捅破了
前端·css·面试
To_OC2 小时前
啃完 TS 工具类型我发现:Pick 和 Omit 原来就是一层窗户纸
前端·面试·typescript
风月说与山鬼4 小时前
三、大括号语法
前端·react.js
kyriewen4 小时前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript
Csvn5 小时前
🕰️ 闭包 + setTimeout 的 5 个经典陷阱:为什么定时器看到的永远不是最新的值?
前端
lilian2335 小时前
Harmony os 技术实战|拼豆制图27:用单字符编码承载 50 张 70×70 图纸
前端·数据库·华为·harmonyos
CarIise5 小时前
CSS选择器与样式关联
前端·css·tensorflow
里欧跑得慢7 小时前
CSS 模块化架构的演进:BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
IT_陈寒7 小时前
Vue的computed属性把我坑惨了,原来我一直用错姿势
前端·人工智能·后端