拖拽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 更新日志

相关推荐
猫猫不是喵喵.35 分钟前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~2 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华2 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子5 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅5 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni5 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学6 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端
先吃饱再说6 小时前
编写一个颜色选择器之后,我理解了 React 工程化的三层架构
react.js·前端框架·前端工程化
先吃饱再说7 小时前
别说你懂 useEffect:从底层机制到生命周期管理,这篇全讲透了
react.js·前端框架