vue + Lodop打印控件的使用

vue + Lodop打印控件的使用

1.先去Lodop官网下载安装相关的包；

下载下来后解压安装
LodopFuncs.js放在项目中，打印的页面中注册引入进去

import { getLodop } from "@u/LodopFuncs.js"

1
2

2.安装打印驱动（我的是得力打印机，根据打印机机型，去得力官网下载对应的打印驱动并安装）

Lodop使用说明及样例官网中都是有的

关于Lodop：
当你的程序采用预览打印语句(如PREVIEW、PREVIEWA等)且预览窗口正常大小时，是完全免费的，输出结果没有水印。仅当采用直接打印语句(如PRINT、PRINTA等)或预览窗口过小时，打印结果的左下角会出现如下两种样式的水印

要去掉以上水印需要按如下途径购买Lodop控件注册号并同时获得更多权益

也就是说直接用LODOP.PRINT()打印的话会有水印，要去掉水印的话要花钱注册控件号加进去

还有一种方法是不花钱去注册，也就是打印预览的方式去打印，一个物料码一个物料码的打印（同一个物料码可以打印多张）

<div id="printBox">
          <div style="margin-bottom: 20px" v-for="item in matterData" :key="item.id">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="物料名称">{{ item.name }}</el-descriptions-item>
              <el-descriptions-item label="物料编号">{{ item.no }}</el-descriptions-item>
              <el-descriptions-item label="CAS号">{{ item.casNo }}</el-descriptions-item>
              <el-descriptions-item label="物料类型">{{ item.type }} </el-descriptions-item>
              <el-descriptions-item label="批次号">{{ item.batchNo }}</el-descriptions-item>
              <el-descriptions-item label="所属企业">{{ item.applyUnit }}</el-descriptions-item>
            </el-descriptions>
            <img :src="item.path" alt="" style="width: 100%; height: 130px; padding-top: 20px" />
            <div class="demo-drawer__footer" style="margin-top: 10px;">
              <div style="text-align: center" v-show="matterData.length > 0">
                <el-button size="small" @click="printFun(item)">打印条码</el-button>
              </div>
            </div>
          </div>
        </div>


printFun(pitem) {
      this.$nextTick(() => {
        this.printBarCodeNew(pitem)
      })
    },
printBarCodeNew(pitem) {
      console.log('打印条码', pitem)
      let LODOP = getLodop()
      LODOP.PRINT_INIT(pitem.name)
      // LODOP.SET_PRINT_PAGESIZE(1, 800, 500, "deli")
      LODOP.ADD_PRINT_RECT(0, 5, 285, 190, 0, 1)  //上左宽高  0实线 1虚线， 线条
      LODOP.SET_PRINT_STYLE('FontSize', 7.5)
      let y = 10;
      let yy = y;
      if(pitem.name.length > 14){
        let newNameStr = pitem.name;
        let strLen = newNameStr.length % 14 > 0 ? Math.ceil(newNameStr.length / 14) : Math.floor(newNameStr.length / 14);
        
        for(let i=0; i< strLen-1; i++){
            if(i==0){
              LODOP.ADD_PRINT_TEXT(yy, 15, 300, 15, '物料名称：' + newNameStr.slice(i*14,i*14+14));
              yy += 20;
            }else{
              LODOP.ADD_PRINT_TEXT(yy, 75, 300, 15, newNameStr.slice(i*14,i*14+14));
            }
        }
      }else{
        LODOP.ADD_PRINT_TEXT(y, 15, 300, 15, '物料名称：' + pitem.name);
      }
      y= yy + 20;
      LODOP.ADD_PRINT_TEXT(y, 15, 140, 15, 'CAS号：' + pitem.casNo)
      LODOP.ADD_PRINT_TEXT(y, 155, 140, 15, '物料类型：' + pitem.type)
        y+=20;
      LODOP.ADD_PRINT_TEXT(y, 15, 140, 15, '批次号：' + pitem.batchNo)
      LODOP.ADD_PRINT_TEXT(y, 155, 150, 15, '物料编号：' + pitem.no)

      if(pitem.applyUnit.length > 19){
        y+=20;
        LODOP.ADD_PRINT_TEXT(y, 15, 300, 15, '所属企业：' + pitem.applyUnit.slice(0,19))
        y+=20;
        LODOP.ADD_PRINT_TEXT(y, 70, 300, 15, pitem.applyUnit.slice(19))
      }else{
        y+=20;
        LODOP.ADD_PRINT_TEXT(y, 15, 300, 15, '所属企业：' + pitem.applyUnit)
      }
      if(y < 110) {
        y+=40;
      }else{
        y+=20;
      }
      LODOP.ADD_PRINT_BARCODE(y, 50, 200, 60, '128Auto', pitem.id)
      // LODOP.PREVIEW() //预览
      LODOP.PRINT() //直接打印
    },
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

上面的代码是做了一些处理的，比如下图中的物料名称和所属企业 字过长的时候一行最多显示多少个，然后剩多余的截取放在下一行，还有就是如果数据中有null的话要处理成空字符串，不然打印出来会显示null这几个字母的，位置这些不合适的话再调一下打印设置，比如标签大小，垂直偏移，进纸等。打印效果如下图：

直接打印（没购买注册号下面有水印）

预览打印（没购买注册号，没水印，每次打印都要弹出打印预览框，且不能批量一次打印多张不同的物料码，只能一个物料码一个物料码的打印（同一个物料码可以打印多张，在打印预览页面设置打印几张的））