关于前端:vuepluginhiprint使用打印篇

置信你看了【vue-plugin-hiprint】应用 - 进阶篇 曾经晓得了 模板对象构造 ，如何查看 可用 API。本 打印篇 将解说 打印相干 API及 注意事项。

源码链接: https://github.com/CcSimple/vue-plugin-hiprint-start

成果如下：

1. 前言

首先咱们应该分明两种 打印模式：

1. 拖拽 生成的 html，创立 iframe 而后调用 浏览器 提供的printAPI
2. 将 生成的 html，通过 socket.io 发送到 间接打印客户端 再调用 electron 提供的printAPI

提供的 打印 API 如下：

1. 浏览器打印：
2. 模板对象：print、printByHtml
3. hiprint 对象：print
4. 借助打印客户端：
5. 模板对象：print2、printByHtml2
6. hiprint 对象：print2

其中 hiprint 对象提供的 print、print2 实用于多模板打印；模板对象实用于 单 / 多面板 打印。

2 填充数据

对于 填充数据 / 数据源 的问题，很多小伙伴都问过我。先看一张图：

如上图，其中 打印设计时 指的就是 设计器 区域。设置 字段名 即可在调用 print、print2、getHtml时填充对应的数据。如果不想显示 冒号：(题目：数据 ) 这种，设置参数 hideTitle:true即可。

上代码：

let printData = {name:'打印 / 预览时显示的名称'};
let hiprintTemplate = new hiprint.PrintTemplate({xxx});
// 弹出浏览器打印窗口，并填充 字段名：name 的元素
hiprintTemplate.print(printData);
let hiprintTemplate2 = new hiprint.PrintTemplate({xxx});
// hiprint 对象打印
hiprint.print({
  templates: [{ template: hiprintTemplate, data: printData},
    {template: hiprintTemplate2, data: printData},
  ],
});

OK，看了下面的 外围代码 及形容 ，置信你曾经很分明如何 填充数据 了。

3 获取预览 html

预览性能 其实是 拿到生成的 html而后去渲染。所以 getHtml 是须要 先填充数据 的。

示例：

let printData = {name:'名称 1'};
let hiprintTemplate = new hiprint.PrintTemplate({xxx});
// printData 如果是数组，那就是批量预览了
let html = hiprintTemplate.getHtml(printData);
// 渲染 html
console.log(`"$('#preview_content').length :"`, $('#preview_content').length);
$('#preview_content').html(html);

预览 就是这么简略的😄，然而也须要 留神: 如果你是 弹窗预览，那么肯定要先可能获取到 $(‘#preview_content’) 这个容器才行哟。

4 浏览器打印

对于 浏览器打印 ，因为各家浏览器 内核 不一样。打印成果 有所不一。这里默认应用的是 Microsoft Edge 基于Chromium。

经测试 基于 Chromium 的浏览器可失常打印。如：Edge、Chrome 等。

上代码：

let printData = {name:'名称 1'};
let printData2 = {name:'名称 2'};
let hiprintTemplate = new hiprint.PrintTemplate({xxx});
// 打印
hiprintTemplate.print(printData);
// 批量打印
hiprintTemplate.print([printData,printData2]);

浏览器打印 更多参数：

// printData 为数组 就是 批量打印
hiprintTemplate.print(printData, {
    // 将覆盖面板偏移设置
    leftOffset: -10, // 左偏移
    topOffset: -10 // 上偏移
  }, {callback: () => {
    // 无奈监听，用户是否点击了 打印 / 勾销 按钮
    console.log('浏览器打印窗口已关上')
  },
  styleHandler: () => {
    // 这里拼接成放 html->head 标签内的 css/style
    // 1. 例如：应用 hiprin 官网的款式
    let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css"media="print"rel="stylesheet">'
    // 2. 重写款式：所有文本红色
    css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
    return css
  }
});

因为 打印原理 是生成 html调用浏览器打印。所以如果 批量打印 传的 数据过多 会造成浏览器 卡死 / 等待时间长 等问题。

5 间接打印

间接打印 其实就是将 填充完数据的 html 通过 socket.io 连贯发送到 间接打印客户端

打印客户端源码：https://github.com/CcSimple/electron-hiprint

5.1 获取打印机列表

间接打印 能够指定 打印机 ；同时本客户端也提供了一些 其余 Api；详见源码。

默认 当网页关上时 – 在jQuery 的 $(document).ready 时去 主动连贯 打印客户端。所以如果你是 先关上网页 ， 再去关上打印客户端 ，那么你须要 刷新网页 ，或者应用 命令从新连贯。

判断是否连贯及从新连贯：

// 判断是否已胜利连贯
if (hiprint.hiwebSocket.opened) {
  // 留神：连贯是异步的
  // 已连贯
}
// 从新连贯客户端  当然你能够去连贯局域网内的客户端
hiprint.hiwebSocket.setHost("http://localhost:17521")

获取打印机列表：

// 模板对象获取
const printerList = hiprintTemplate.getPrinterList();
// hiprint 对象获取
const list = hiprint.hiwebSocket.getPrinterList();

留神：这样获取的是 连贯胜利时 本机的打印机列表

从新 / 刷新 获取打印机列表：

// 这是异步的
hiprint.refreshPrinterList((list) => {console.log('refreshPrinterList')
  console.log(list)
});

5.2 打印

let printData = {name:'名称 1'};
let printData2 = {name:'名称 2'};
let hiprintTemplate = new hiprint.PrintTemplate({xxx});
// 间接打印 将应用零碎设置的 默认打印机
hiprintTemplate.print2(printData);
// 批量间接打印
hiprintTemplate.print2([printData,printData2]);

// 间接打印回调
// 发送工作到打印机胜利
hiprintTemplate.on('printSuccess', function (e) {})
// 发送工作到打印机失败
hiprintTemplate.on('printError', function (e) {})

因为客户端原理一样是须要先 渲染 html，所以 批量打印 传的 数据过多 会造成客户端 卡死 / 等待时间长 等问题。所以倡议应用 队列模式 进行 批量打印。

间接打印 更多参数：

// printData 为数组 就是 批量打印
hiprintTemplate.print2(printData, {
  // 将覆盖面板偏移设置
  leftOffset: -10, // 左偏移
  topOffset: -10 // 上偏移
});
// 指定打印机 或 参数
hiprintTemplate.print2(printData, {
  printer:“”, // 打印机 名称
  title: "打印工作名称",
  color: false, // 是否打印色彩 默认 true
  copies: 1, // 打印份数 默认 1
});

其余参数可查看源码 https://github.com/CcSimple/electron-hiprint

6 多模板预览 / 打印

有了 后面两节 的根底，多模板打印 也就很容易了解了。

示例：

let printData = {name:'名称 1'};
let printData2 = {name:'名称 2'};
let hiprintTemplate = new hiprint.PrintTemplate({xxx});
let hiprintTemplate2 = new hiprint.PrintTemplate({xxx});

// 多模板预览
hiprint.getHtml({
  templates: [{ template: hiprintTemplate, data: printData},
    {template: hiprintTemplate2, data: printData2},
  ],
});
// 多模板打印
hiprint.print({
  templates: [{ template: hiprintTemplate, data: printData},
    {template: hiprintTemplate2, data: printData2},
  ],
});
// 多模板间接打印
hiprint.print2(
  {
    templates: [{ template: hiprintTemplate, data: printData, options: {} },
      {template: hiprintTemplate2, data: printData2},
    ],
    options: {printer: "", landscape: true},
  },
  function (data) {console.log("printSuccess");
  },
  function (e) {console.log("printError");
  }
);

代码一看，霎时明了。

总结

• 须要了解 打印原理，有问题能力晓得大略出在哪
• 须要 联合关键字去摸索 相干 API 的 更多可能
• 整篇下来难点并不多，老手们须要 多多摸索

打印篇 到此结束，如有 不分明 的知识点 ，大家 肯定要学会本人查阅相干材料。

欢送各位码友 转发 及留言反馈 ，感觉不错就 点个赞 再走咯~