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">

使用插件

<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>

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

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

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