关于前端: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的更多可能
• 整篇下来难点并不多，老手们须要多多摸索

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

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