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

相关推荐
ssshooter1 小时前
小程序分包页面报 "has not been registered yet" 的隐蔽根因:一个动态 import 拖垮整个分包
前端·javascript·微信小程序
鹏多多2 小时前
Web浏览器后台离线通知方案实现以及兼容指南
前端·javascript·vue.js
yangmu32032 小时前
Vue3 响应式系统深度解析:从 Proxy 到依赖追踪
前端·javascript·vue.js
还有多久拿退休金2 小时前
AI 写了代码,谁替你"试毒"?
前端·架构·ai编程
大E帝国子民12 小时前
OpenCloudOS Server 9 安装 Nginx 完整指南
前端·网络·nginx
少年白马醉春风丶2 小时前
【AI Agent面试题】Agent 的自主性分级,怎么理解?
前端
Asize2 小时前
Node path 与 fs 模块:从回调地狱到 async await 的异步进化
javascript·node.js
yingyima2 小时前
Docker Compose 紧急救援:凌晨3点服务器报警的解决方案
前端
石小石Orz3 小时前
星云SDK + 油猴:给LLM塑造肉身,陪伴你在每个网页
前端·人工智能