使用HiPrint批量打印条码，二维码

简介

hiprint是一款开源vue打印插件，开箱即用，非常方便。
官方文档:
hiprint官方文档

Vue集成

// 控制台中输入 以安装npm包

npm install vue-plugin-hiprint
1

// 在index.html 文件中添加打印所需样式: 当然你也可以调整成 相对链接/自有链接
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
// main.js中 引入安装

import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
1
2
3

页面使用-单页面打印

//初始化模板
this.$pluginName.init();
var hiprintTemplate = new this.$pluginName.PrintTemplate();
//添加页面打印模板
var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
//文本
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
//条形码
panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
//二维码
panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
//长文本
panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
//表格
panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
//Html
panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });
//竖线//不设置宽度
panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
//横线 //不设置高度
panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
//矩形
panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
//调用其中一种
//打印
hiprintTemplate.print({});
//直接打印，需要安装客户端
hiprintTemplate.print2({});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

页面使用-批量打印

//提前定义好打印模板  barcodeData，count字段为自定义数据字段，需传入动态数据  panel.js
export default {
    "panels": [
      {
      "index": 0,
      "height": 60,
      "width": 80,
      "paperHeader": -15,
      "paperFooter": 170.07874015748033,
      "printElements": [{
        "options": {
          "left": 28.5,
          "top": 12,
          "height": 17,
          "width": 120,
          "testData": "单据表头",
          "fontSize": 16.5,
          "fontWeight": "700",
          "textAlign": "center",
          "hideTitle": true,
          "title": "单据表头1"
        }, "printElementType": {"title": "单据表头", "type": "text"}
      }, {
        "options": {
          "left": 28.5,
          "top": 34.5,
          "height": 32,
          "width": 120,
          "testData": "XS888888888",
          "fontSize": 12,
          "lineHeight": 18,
          "fontWeight": "700",
          "textAlign": "left",
          "textContentVerticalAlign": "middle",
          "textType": "barcode",
          "field":"barcodeData",
          "title": "二维码"
        }, "printElementType": {"title": "二维码", "type": "text"}
      }, {
        "options": {
          "left": 157.5,
          "top": 15,
          "height": 9.75,
          "width": 57,
          "title": "第",
          "field": "count",
          "testData": "1"
        }, "printElementType": {"title": "文本", "type": "text"}
      }],
      "paperNumberLeft": 196,
      "paperNumberTop": 148,
      "paperNumberDisabled": true
    }]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

//在data定义打印field字段数据
printData:[
        {barcodeData:'1237748567aa',count:'1'},{barcodeData:'1237748567bb',count:'2'},{barcodeData:'1237748567cc',count:'3'}
      ]
1
2
3
4

//批量打印使用
//带入模板初始化
this.$pluginName.init();
let hiprintTemplate = new this.$pluginName.PrintTemplate({
        template:panel
      });
//传入数据打印
hiprintTemplate.print(this.printData,{})
1
2
3
4
5
6
7
8

总结

hiprint是一款很方便的打印插件，可以提前到官网上面设置好打印布局，然后生成模板，另存到一个文件中，方便使用。
使用中遇到问题：打印时，样式重叠，内容总打印在第一页上，原因：当前页面没有引入print-lock.css样式，可见官网说明。
index.html引用外部css需将css文件放在与src同级目录下static文件夹中。