vue3简单使用打印插件vue-plugin-hiprint

插件git地址：https://github.com/CcSimple/vue-plugin-hiprint

安装

npm install vue-plugin-hiprint
在public里面新建一个print-lock.css，用来存放相关css代码
css代码来源https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css
然后在index.html里面加入如下代码（href后面跟上的是上面新建的css文件地址）

<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css">
1

使用插件

<template>
	<div>
			<el-button @click="print('test')">测试打印</el-button>
	</div>
</template>
<script setup>
//定义一些打印相关的常量 可以通用
//打印左右边距
const printMinLeft = 5
//打印A4宽度px
const a4Width = 595
//A4的panel设置
const a4Panel = {width: 210, height: 297, paperFooter: 340, paperHeader: 10}


const headerColNum = 3//总列数
const titleHeight = 20//标题行高
const contentWidth = a4Width - printMinLeft * 2//内容宽度


//定义两个新建打印文本和打印表格列的方法，方便复用代码
//新字段元素：列索引，列数，行索引（从1开始） 中文名 字段名
const newPrintText = (col, colNum, row, title, field) => {
    return {
        options: {
            width: contentWidth / headerColNum * colNum,
            height: 20,
            fontSize: 10,
            top: titleHeight + 20 * row,
            left: contentWidth / headerColNum * (col - 1) + printMinLeft,
            type: 'text',
            title: title,
            field: field,
        }
    }
}
// 新列元素：中文名，字段名。相对宽度（建议1~10）
const newPrintColumn = (title, field, width) => {
    return {
        title: title,
        field: field,
        width: width,
        colspan: 1,
        rowspan: 1,
        align: 'center',
    }
}



import {autoConnect, disAutoConnect, hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
disAutoConnect()// 取消自动连接直接打印客户端
hiprint.init()//初始化
const print=title=>{
	//定义需要打印的数据
	let printData={
		formNo:'F0001',
		operator:'张三',
		addDate:'2023-01-01',
		details:[]
	}
	for(let i=0;i<5;i++){
		printData.details.push(
		{
			productNo:'P000'+i,
			productName:'测试产品'+i,
			num:0,
			unit:'个'
		})
	}
    //定义模板和面板，所有打印元素都在面板上，默认A4纸大小	
	let hiprintTemplate = new hiprint.PrintTemplate();
    let panel = hiprintTemplate.addPrintPanel(a4Panel);
    //文本标题
    panel.addPrintText({
        options: {
            width: 150,
            height: 20,
            top: 10,
            left: contentWidth / 2 - 30,
            fontSize: 20,
            title: '测试单据',
            type: 'text'
        }
    })
    //头部内容
    panel.addPrintText(newPrintText(1, 1, 1, '表单编号', 'formNo'))
    panel.addPrintText(newPrintText(2, 1, 1, '操作人', 'operator'))
    panel.addPrintText(newPrintText(3, 1, 1, '操作日期', 'addDate'))
    let tmpColumns = []
    tmpColumns.push(newPrintColumn('产品编号', 'productNo', 3))
    tmpColumns.push(newPrintColumn('产品名称', 'productName', 5))
    tmpColumns.push(newPrintColumn('数量', 'num', 1))
    tmpColumns.push(newPrintColumn('单位', 'unit', 1))
    panel.addPrintTable({
        options: {
            width: a4Width - printMinLeft * 2,
            top: 80,
            left: printMinLeft,
            field: 'details',
            columns: [tmpColumns]
        }
    })
//打印
    hiprintTemplate.print(printData);
}
</script>
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

title属性一般都是默认文本
field属性一般都是绑定数据的字段名称

如果需要打印条形码或者二维码，也是用addPrintText方法，只是options的参数textType使用“barcode”（条形码）或者“qrcode”（二维码）即可。
如果需要打印html则可以使用addPrintHtml方法。
其他特殊打印形状参考http://hiprint.io/docs/text

简单的自定义打印，也可以通过存储元素的top和left属性，确认元素位置，实现简单的自定义打印。