更新日志

2025-09-25

@sv-print/hiprint@0.3.4

🌈 新增面板显示页眉/尾线.
✨ 优化更新模板json(大纸张 => 小纸张) 时页眉/尾线边界值的处理.
✨ fix 拖拽页眉/尾线,页码模板json未更新问题.
✨ fix 表格行高度计算问题.

2025-09-22

sv-print@0.2.3
@sv-print/hiprint@0.3.2
@sv-print/plugin-ele-bwip-js@0.1.17
@sv-print/plugin-api-image@0.1.2
@sv-print/plugin-i18n@0.1.3

🌈 优化 bwip-js插件支持缩放比例(调整条码宽度),内嵌文本支持字体大小,颜色,字间距等.支持边距设置 && 支持自定义渲染返回svg;
✨ 优化面板参数更新问题 && 移除无用纸张方向 && 调整打印方向问题(浏览器打印弹窗布局:纵向,横向).
✨ 优化 api-image 插件导出图片缩放(pixelRatio)问题.
✨ 优化 i18n 插件参数缓存/异常时异常情况.
✨ 优化编辑器快捷键处理(非编辑状态) & 撤销/重做.

sv-print@0.2.0
@sv-print/hiprint@0.3.0
@sv-print/vue3@0.2.0
@sv-print/react@0.2.0
@sv-print/vue@0.2.0
@sv-print/plugin-view-code-edit@0.1.0 -- 代码编辑插件.
@sv-print/plugin-api-image@0.1.0 -- toImage API.
@sv-print/plugin-api-pdf@0.1.0 -- toPdf API 使用 jspdf2.x 版本
@sv-print/plugin-api-pdf3@0.1.0 -- toPdf API 使用 jspdf3.x 版本

🌈 新增导出 Preview 预览组件(vue3、react、vue) & 优化多页显示效果.
🌈 新增导出 DragBox 拖拽盒子组件(vue3、react、vue).
🌈 新增 Designer设计器组件 template,printData,providers,providerMap,tags 支持自适应更新.
🌈 新增 Designer设计器组件支持 rulerStyle 标尺样式 & 标尺显示拖拽元素的宽高.
🌈 新增历史记录拖拽盒子.
🌈 新增一键隐藏/显示所有拖拽盒子.
🌈 新增支持自定义新增面板参数 & 新增 hook newPanel.
🌈 新增内置图片/背景图形选择函数(本地选择文件)
🌈 新增 design('#id',{activePanel: true}) 支持参数 activePanel 默认选中面板.
🌈 新增表格支持选中 & 复制功能.
🌈 新增表格支持一行多组排列 (横排,竖排).
🌈 新增可分页 shtml 插件支持整体节点过滤参数.
✨ 优化多面板操作功能, 切换选中面板, 删除最后一个时创建默认面板.
✨ 优化表格统一使用 "fields" 作为字段名下拉选项源. 表格列则使用 "columnFields".
✨ 优化表格列部分函数编辑未能及时生效问题.
✨ 优化表格头排序列表显示.
✨ 优化拖拽元素时同步更新右侧参数的坐标大小 & 表格调整宽度问题.
✨ 优化操作历史重复记录问题.
✨ 优化新拖拽元素初始位置问题.
✨ 调整移除默认内置代码编辑器, 使用 @sv-print/plugin-view-code-edit 插件形式引入.
✨ 调整移除默认内置toImage API, 使用 @sv-print/plugin-api-image 插件形式引入.
✨ 调整移除默认内置toPdf API, 使用 @sv-print/plugin-api-pdf3 或 @sv-print/plugin-api-pdf 插件形式引入.

🎮 代码示例(vue3)

0.2.x

组件升级: vue3、react、vue组件均导出组件 Designer(设计器)、Header(顶部栏)、Preview(预览组件)、DragBox(拖拽盒子) 四个常用组件.
API升级: 使用 Promise 异步获取数据. 完善基础 TS 类型支持. 抽离部分API, 使用插件形式引入: toImage、toPdf

2025-08-28

sv-print@0.1.34
@sv-print/hiprint@0.2.23
@sv-print/plugin-formatter@0.1.0

🌈 新增自定义格式化插件, 自定义格式化数据.
🌈 新增设计器支持 Header 部分参数,无需使用插槽.
✨ 调整自定义获取数据函数回调新增当前元素: (ele, data, field, printData) => data.
✨ 优化批量预览/打印渲染性能问题.
✨ 优化表格在一些特殊场景下(页眉线之上,页脚线之下,每一页高度都不够的情况)卡死的问题.
✨ 优化表格列支持动态扩展新参数.
✨ 优化表格列格式化函数/样式函数回调参数统一, 新增返回当前列信息.
✨ 优化默认ts类型支持.

🎮 代码示例

2025-08-21

@sv-print/plugin-ele-shtml@0.1.0

🌈 新增可自动分页的插件元素 shtml.

2025-08-20

sv-print@0.1.33
@sv-print/hiprint@0.2.22

🌈 新增表格支持动态列功能(列设置autoField:"标题#字段名,字段名2").
🌈 新增设计器内粘贴模板json更新模板功能.
🌈 新增模板对象支持传入 beforeDragIn 拖入元素前操作. 设计器组件 props 为"onBeforeDragIn".
🌈 优化模板对象新增 goBack API 更新到指定历史记录位置.
✨ 优化表格调整表头操作(合并单元格,插入,删除,对齐等),同时记录操作历史.
✨ 优化 hinnn.toUpperCase 支持传自定义函数(Nzh,val)=> val. Nzh 挂载到全局和 hinnn 上
✨ 优化基础元素 text,html,longText 格式化函数错误回显 & 样式函数回调新增当前页paperNo.
✨ 优化 html 元素支持: 标题,字段名,测试数据.
✨ 优化默认provider & 新增分页符自动适配纸张宽度.
✨ 优化创建元素异常时友好提示(抛出【xxx】类型元素无法创建...).

🎮 代码示例

2025-08-13

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

可应用内更新, 重启应用即可.

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

✨ 优化更新最新版本在线设计器
✨ fix 新窗口打开在线设计BUG

2025-08-13

sv-print@0.1.32

✨ fix 使用插槽自定义 Header 无法拖拽问题
✨ fix 当移动端布局切换到PC端时, 元素选中事件丢失问题

2025-08-12

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

在线API文档说明: https://celmpuecfz.apifox.cn/305982s0

下载链接: https://pan.quark.cn/s/428f36751e92

小程序-云打印、获取图片、pdf 测试:

🌈 新增支持应用内更新(全量更新/增量更新).
🌈 新增支持拖拽 config.json 更新配置, xxx.zip 更新渲染器.
🌈 新增支持 type: capture (兼容render-jpeg)返回图片.
✨ 优化在线设计, 重写 Header: 保存顿号、编辑/导出.
✨ 优化模板中心, 在线设计新增,编辑时刷新列表.
✨ 优化兼容中转服务, render-xxx API 和回调 render-xxx-success、render-xxx-error.
✨ 优化更新默认渲染器为最新版本.
✨ 优化托盘菜单新增:检查更新、重启.
✨ 优化统一在队列执行完成事件中处理回调事件(支持 socket.io、mqtt)
✨ 调整原pdf缓存路径,改为缓存文件路径(pdfPath -> tempFilePath) 缓存pdf,图片.

🎮 代码示例

这里使用 sv-print 内置的 socket.io 对象，默认连接 http://localhost:17521/

hiwebSocket.socket.on('success',(e)=>{
  console.log(e);
});
hiwebSocket.socket.on('error',(e)=>{
  console.log(e);
});
// 兼容 默认的 print2 方法
hiwebSocket.socket.emit('news', {
  // "printer": "PDFwriter",
  "type": "capture",
  // capture 打印  返回的类型 canvas.toDataURL('image/' + captureType) 同时也是扩展名
  "captureType": "jpeg",
  "buffer": true,
  // "toNet": true, // 是否仅渲染返回 网络pdf地址
  "template": {}, // 模板json 
  "printData": {}, // 打印数据
  "templateId": "aec8bc1a-f53a-44d4-81dd-13c5a363f612", // 用于 success，error 回调中区分是哪个模板
});
// 可统一使用
hiwebSocket.socket.emit('print', {
  // "printer": "PDFwriter",
  "type": "capture",
  // capture 打印  返回的类型 canvas.toDataURL('image/' + captureType) 同时也是扩展名
  "captureType": "jpeg",
  "buffer": true,
  // "toNet": true, // 是否仅渲染返回 网络pdf地址
  "template": {}, // 模板json 
  "printData": {}, // 打印数据
  "templateId": "aec8bc1a-f53a-44d4-81dd-13c5a363f612", // 用于 success，error 回调中区分是哪个模板
});

📷 示例截图

2025-08-07

@sv-print/plugin-text-auto@0.1.0

🌈 新增插件文本字体自适应

🎮 代码示例

import pluginTextAuto from "@sv-print/plugin-text-auto";
let plugins = [
  pluginTextAuto({
    sizeList: [12, 5, 4, 3, 2, 1], // 适应最小字体选项
    maxIterations: 15, // 适应次数
    enablePrecision: true, // 启用精确适应
    precision: 0.5, // 适应精确step
    precisionCount: 10, // 适应精确次数
    lineHeightMode: "auto", // 行高模式 auto | original | normal | unset
    overrideHidden: false, // 超出是否隐藏
    extendsCss: {
      // 扩展css
      "word-wrap": "break-word", // 单词换行
    },
  }),
]

2025-08-06

sv-print@0.1.31
@sv-print/hiprint@0.2.21

🌈 新增 toolbar 新增水平/垂直间隙、网格对齐工具
✨ 优化新增 setElsGrid API 用于设置元素网格对齐.

🎮 代码示例

// 消除水平间隙
printTemplate?.setElsAlign("clearVer");
// 消除垂直间隙
printTemplate?.setElsAlign("clearHor");
// 默认2列 网格对齐
printTemplate?.setElsAlign("clearGrid");
// 水平间隙
printTemplate?.setElsSpace(10, true);
// 垂直间隙
printTemplate?.setElsSpace(10, false);
// grid网格对齐
const column = 2;
printTemplate?.setElsGrid(column);

2025-08-05

@sv-print/hiprint@0.2.20

✨ 优化表格行/列合并函数,跨页合并显示问题.

2025-08-01

sv-print客户端@2.0.3

✨ 新增 MQTT服务,并提供了MQTT在线测试HTML.
✨ 新增预览功能,打印日志支持预览打印的模板/html.支持自定义预览渲染器
✨ 优化在线设计功能,支持新窗口打开,支持自定义设计器地址
✨ 优化模板中心功能,支持自定义API请求
✨ fix 多打印机自动创建渲染窗口BUG, 默认最大 3 个渲染窗口.

2025-07-29

sv-print@0.1.30
@sv-print/hiprint@0.2.19
@sv-print/plugin-i18n@0.1.1
✨ 优化 i18n插件,适配右键菜单、插件元素新增属性
✨ 适配移动端 toolbar i18n
✨ fix 移动端预览多页高度显示问题
✨ 优化 touchZoom 使用 css "zoom" 做缩放

2025-07-25

sv-print@0.1.29
@sv-print/hiprint@0.2.18
@sv-print/plugin-i18n@0.1.0

🌈 新增支持多语言 i18n 插件

// vue3 为例
<template>
  <Designer :plugins="plugins"></Designer>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { Designer } from '@sv-print/vue3';
  // 先安装所需插件: eg: npm i @sv-print/plugin-i18n
  // 再引入插件
  import pluginI18n, { translateBySelector } from "@sv-print/plugin-i18n";
  import en from "./i18n/en.json"; // 自己准备多语言文件
  const plugins = ref([
    pluginI18n(
      {
        // lng: "英文", // 默认: "简体中文"
        // debug: true, // 调试: 可查看对应语言 缺少的翻译
        resources: {
          // 自定义 key: "英文", 则列表 显示对应的名称
          英文: {
            translation: en,
          },
        },
      },
      (i18next, t, err) => {
        // 回调,干点儿其他的
        console.log("测试翻译", t("文本"));
        // 插件提供的一个 API, 根据 选择器 翻译
        // translateBySelector([".sv-print"]);
      }
    ),
  ]);
</script>

✨ 优化新增hook "onDesigned"、"onPreview"
✨ fix: customDataFun 导致表格无法拖拽
✨ fix: 元素参数默认值设置失效问题

2025-07-22

sv-print@0.1.28
@sv-print/hiprint@0.2.15
@sv-print/plugin-ele-bwip-js@0.1.15
@sv-print/plugin-ele-e2table@0.1.4
@sv-print/plugin-ele-echarts@0.1.10
@sv-print/plugin-ele-fabric@0.1.11

🌈 新增支持设置多个字段名和自定义字段名值获取方法

// 第3个参数 printData, 兼容表格列数据获取.
const customDataFun = (data, field, printData) => {
  let fieldData;
  const fieldList = `${field}`.split(",");
  const len = fieldList.length;
  for (var i = 0; i < len; i++) {
    const f = fieldList[i];
    const curData = (f.split(".").reduce((a, c) => (a ? a[c] : data ? data[c] : ""), false) || "");
    // 如果是表格: curData 是个对象哟
    if (typeof curData == "object") {
      if (Array.isArray(curData)) {
        fieldData = [...fieldData||[], ...curData];
      } else {
        fieldData = {...fieldData||{}, ...curData};
      }
    } else {
      const connector = i == 0 ? '' : '->'
      // 有必要考虑 number 情况么?
      fieldData = `${(fieldData || '')}${connector}${curData}`;
    }
  }
  return fieldData;
};
// 组件中
const fun = ref(customDataFun);
<Designer :customDataFun="fun" />
// 或者
const hiprintTemplate = new hiprint.PrintTemplate({
  template: panel, // 模板
  customDataFun: customDataFun,
});
// 或者
hiprintTemplate.setCustomDataFun(customDataFun);

🌈 调整优化组件内编辑器新增清空复制按钮

✨ fix 行列合并函数, 跨页首行colspan列数显示问题
✨ 优化 register api

2025-07-11

sv-print@0.1.25
@sv-print/hiprint@0.2.13

🌈 调整优化支持触摸事件 & 适配移动端UI

🌈 新增支持 touchZoom 方法,以适配移动端预览双指缩放

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 添加元素

printTemplate?.addPrintElementToPaperByTid("defaultModule.text");
// 添加到指定位置 pt
const left = 10;
const top = 30;
printTemplate?.addPrintElementToPaperByTid("defaultModule.text", left,top);

🌈 新增支持 providerMap 支持传自定义渲染函数 --> hiprint.PrintElementTypeManager.build 支持自定义渲染可拖拽元素


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 键可批量对齐

printTemplate?.setElsAlign("left", true);
printTemplate?.setElsAlign("right", true);

🌈 调整优化锁定元素禁止调整大小 & 全局配置 disableNoDraggableSize 默认 true

hiprint.setConfig({
  disableNoDraggableSize: false, // 锁定元素,可编辑属性 宽高大小
})

🌈 调整新增 buildPagination 构建多面板菜单

// 手动构建多面板菜单
printTemplate.buildPagination("#printPanels");

✨ 优化导出PDF,导出图片部分元素清晰度 & 导出图片支持 quality: 0~1
✨ 优化双击编辑功能(可编辑为html)
✨ 优化删除元素逻辑(锁定元素,全选元素) & 右键菜单删除情况
✨ 优化预览支持设置是否隐藏导出图片,导出PDF以及直接打印按钮
✨ 优化全选时触发元素选中事件
✨ 优化 designer 组件传 template 为模板对象时,默认事件处理
✨ fix setConfig 方法可能导致 tab 显示错误问题

2025-06-26

sv-print@0.1.23
@sv-print/hiprint@0.2.11
@sv-print/vue@0.1.20
@sv-print/vue3@0.1.20
@sv-print/react@0.1.20
@sv-print/plugin-ele-bwip-js@0.1.14
@sv-print/plugin-ele-e2table@0.1.3
@sv-print/plugin-ele-echarts@0.1.9
@sv-print/plugin-ele-fabric@0.1.10

🌈 优化 hiprint.setConfig 方法, 支持扩展插件元素属性 & 支持before

hiprint.setConfig({
  // 插件新元素的 元素属性
  xxx: {
    tabs: [
      {}
    ]
  }, 
  text: {
    tabs: [
      {},
      // 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
      {
        name: '样式', options: [
          {
            name: 'scale',
            before: 'color', // 自定义参数，插入在 color 之前
            hidden: false
          },
        ]
      }
    ],
  }
});

🌈 新增 hiprint.getOptionItems 查看所有元素参数对象, 新增 getOptionItem hook

// 元素的所有参数对象
const optionItems = hiprint.getOptionItems;

// hook getOptionItem
const getOptionItemHook = {
  hook: 'getOptionItem',
  name: '对元素参数做一个包装',
  description: '渲染元素属性时,构建更多值,或者做多语言处理',
  priority: 1,
  run: (item) => {
    // 示例 给 元素属性 添加一个 data-name 属性
    const oldCreate = item.createTarget;
    item.createTarget = function (...args) {
      const target = oldCreate.call(item, ...args);
      console.log(target);
      target.attr({
        "data-name": item.name,
      });
      return target;
    };
    return item;
  }
}

🌈 vue/vue3/react 组件新增导出 Header 组件

import { Header } from '@sv-print/vue'
import { Header } from '@sv-print/vue3'
import { Header } from '@sv-print/react'

🌈 toolbar 新增 setZoom 方法设置默认缩放

const onDesigned = (e) => {
  const {designerUtils} = e.detail;
  designerUtils.toolbar.setZoom(1.5)
};

✨ 优化水印内容支持 ${name} 取打印数据中的字段值
✨ 优化缩放时元素的 [位置大小],[删除按钮] 缩放问题
✨ 修复插件[plugin-ele-fabric] fText 元素宽高问题
✨ 优化插件[plugin-scale] 点击元素位置偏移问题
✨ 优化插件[bwip-js,fabric,echarts,e2table] 支持扩展元素参数
✨ 修复插件[plugin-ele-echarts] 部分图表渲染问题
✨ 修复文本 writing-mode 对 resize-panel 的影响
✨ fix 表格列渲染条形码/二维码导出pdf问题
✨ fix 删除元素时 of null (reading 'className'), 组件销毁时 cloneNode error