置信你看了 【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);// 渲染htmlconsole.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的更多可能
  • 整篇下来难点并不多，老手们须要多多摸索

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

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