全局对象&API

小不2025/6/27...大约 3 分钟sv-print可视化打印打印组件模板

全局对象

暴露在 window 上的全局对象。

HIPRINT_CONFIG 全局配置对象: 元素类型对应参数,设计器一些配置项.
hiprint 创建模板对象,多模板打印,预览; 初始化provider,查看注册的可拖拽元素(provider),查看所有参数对象.
hiwebSocket 用于连接打印客户端的 socket.io 对象,可断开,重连,发送消息.
hinnn 工具类: event事件,单位转换,节流,防抖,数字转大写等.

HIPRINT_CONFIG

控制台输入 HIPRINT_CONFIG 可以查看配置对象。

console.log(HIPRINT_CONFIG);

hiprint

控制台输入 hiprint 可以查看该对象。

怕你迷路:

构建可拖拽元素 provider 说明

元素参数重写&新增

打印模板相关

// 创建模板对象
const hiprintTemplate = new hiprint.PrintTemplate({
  template: {}, // 模板json对象 
});
// 模板对象 API
const printData = {name: 'i不简'};
// 获取预览 html
const jqueryObj = hiprintTemplate.getHtml(printData);
const html = jqueryObj.html();
// 打印
hiprintTemplate.print(printData);
// 批量打印 
hiprintTemplate.print([printData, printData, printData]);
// 直接打印(静默打印)
hiprintTemplate.print2(printData)


// 多模板操作
const hiprintTemplate2 = new hiprint.PrintTemplate({
  template: {}, // 模板json对象 
});
// 多模板预览
const jqueryObj2 = hiprint.getHtml({
  templates: [
    { template: hiprintTemplate, data: printData },
    // 批量
    { template: hiprintTemplate2, data: [printData, printData, printData] },
  ],
});
const html = jqueryObj2.html();
// 多模板打印
hiprint.print({
  templates: [
    { template: hiprintTemplate, data: printData },
    // 批量
    { template: hiprintTemplate2, data: [printData, printData, printData] },
  ],
});
// 多模板直接打印
hiprint.print2(
  {
    templates: [
      { template: hiprintTemplate, data: printData, options: {} },
      // 批量
      { template: hiprintTemplate2, data: [printData, printData, printData], options: {} },
    ],
    options: { printer: "", landscape: true },
  },
  function (data) {
    console.log("printSuccess");
  },
  function (e) {
    console.log("printError");
  }
);

provider相关

// 查看前面文档 构建可拖拽元素

// 定义 provider
new hiprint.PrintElementTypeGroup("辅助", [
  {
    tid: "testModule.hline",
    title: "横线",
    type: "hline",
  },
]);

// 初始化 provider
import testProvider from './testProvider.js';
hiprint.init({
  providers: [testProvider({title: 'testModule'})]
});

// 查看已注册的 provider
// ElementTypes 对象
console.log(hiprint.ElementTypes);
// 所有 provider
console.log(hiprint.ElementTypes.allElementTypes);

// 更新 provider 的元素, 更新后 新拖拽的元素 就是更新后属性参数
hiprint.updateElementType('defaultModule.text', (type) => {
  type.title = '这是更新后的元素';
  return type
})

// 构建 渲染可拖拽元素 到指定容器
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'testModule');

// 初始化 让自定义 UI 的元素 可拖拽 
hiprint.PrintElementTypeManager.buildByHtml($('.draggable-item'));

注册插件

import pluginEleBwip from '@sv-print/plugin-ele-bwip-js';

hiprint.register({
  authKey: '', // 授权key
  plugins: [pluginEleBwip({})],
});

参数重写/新增

hiprint.setConfig({
  // 查看前面文档 [元素参数重写&新增]
})

获取所有参数对象

console.log(hiprint.getOptionItems);

其他

// 连接 打印客户端 成功后

// 刷新 获取打印机列表
hiprint.refreshPrinterList(callback);
// 获取 ip,mac地址信息
hiprint.getAddress();
// 获取 客户端信息
hiprint.getClientInfo((e) => {});
// 获取 客户端连接 的 socket.io 对象
hiprint.getClients((e) => {});
// ipp 打印
hiprint.ippPrint(options, callback, connectedCallback);
// ipp 请求
hiprint.ippRequest(options, callback);

hiwebSocket

socket.io 工具类: 用于连接打印客户端. 发送, 接收数据.

console.log(hiwebSocket);

手动连接/重连

// 查看是否 连接成功 
console.log(hiwebSocket.opened);
// 查看链接的 地址: 默认 http://localhost:17521
console.log(hiwebSocket.host);

// 重连
hiwebSocket.reconnect();
// 断开连接
hiwebSocket.stop();

// 设置连接,并连接
hiwebSocket.setHost('http://localhost:17521', 'token', (isOpened, e) => {
  // 连接成功回调
  console.log('isOpened', isOpened);
  console.log(e);
});

发送打印数据

// 打印 url pdf
hiwebSocket.send({
  pdf_path: 'https://xxxx/xxx.pdf',
  type: 'url_pdf'
});
// 打印 html
hiwebSocket.send({
  html: '<div>打印html</div>',
});
// 模板打印
hiwebSocket.send({
  template: { panels: [ { xxxx }]}, // 模板json
  printData: {name: '张三'} // 打印数据
});

// hiwebSocket.send(xxx) 发送数据 等同于  hiwebSocket.socket.emit('news', xxx)


// 打印消息回调
hiwebSocket.socket.on('success', (data) => {
  console.log(data);
});
hiwebSocket.socket.on('error', (e) => {
  console.log(e);
});

hinnn

工具类, 封装了常用方法. 如: 事件, 单位转换, 节流, 防抖, 数字转大写等.

事件

// 触发
hinnn.event.trigger('eventName', data);

const callBack = (data) => {
};
// 移除监听
hinnn.event.off('eventName', callBack);
// 监听
hinnn.event.on('eventName', callBack);
// 清空监听
hinnn.event.clear('eventName');

单位转换

// pt 转 xx
hinnn.pt.toPx(10);
hinnn.pt.toMm(10);

// px 转 xx
hinnn.px.toPt(10);
hinnn.px.toMm(10);

// mm 转 xx
hinnn.mm.toPx(10);
hinnn.mm.toPt(10);

转大写

// 支持 '0' 到 '7' 种类型
hinnn.toUpperCase('0',10.8) // 十点八
hinnn.toUpperCase('5',10.8) // 人民币壹拾元捌角
hinnn.toUpperCase('7',10.8) // 壹拾元捌角零分

日期格式化

hinnn.dateFormat(new Date(), 'yyyy/MM/dd')

节流/防抖

hinnn.throttle(() => {}, 200);
hinnn.debounce(() => {}, 200);