vue-plugin-hiprint 使用-打印篇

2023年3月8日 770点热度 0人点赞 0条评论

 

相信你看了 【vue-plugin-hiprint】使用-进阶篇 已经知道了模板对象结构,如何查看可用API。本打印篇将讲解打印相关API注意事项

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

效果如下:

vue-plugin-hiprint 使用-打印篇

1.前言

首先我们应该清楚两种打印模式

  1. 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI
  2. 生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI

提供的打印 API 如下:

  1. 浏览器打印:
  • 模板对象:printprintByHtml
  • hiprint对象:print
  1. 借助打印客户端:
  • 模板对象:print2printByHtml2
  • hiprint对象:print2

其中 hiprint对象提供的printprint2适用于多模板打印;模板对象适用于单/多面板打印。

2 填充数据

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

vue-plugin-hiprint 使用-打印篇

如上图,其中打印设计时指的就是设计器区域。设置字段名即可在调用 printprint2getHtml时填充对应的数据。如果不想显示冒号:(标题:数据)这种,设置参数 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的浏览器可正常打印。如:EdgeChrome 等。

上代码:

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的更多可能
  • 整篇下来难点并不多,新手们需要多多摸索

打印篇到此结束,如有不清楚知识点,大家一定要学会自己查阅相关资料

欢迎各位码友转发留言反馈,觉得不错就点个赞再走咯~

 


原文标题:【vue-plugin-hiprint】使用-打印篇
原文链接:【vue-plugin-hiprint】使用-打印篇
原文快照:【vue-plugin-hiprint】使用-打印篇 - PDF

帮助教程

提供最新的帮助教程,方便使用。

文章评论