Vue3使用hiprint——批次打印条码
例图：打印编号
一、安装Vue-Plugin-HiPrint
要开始使用 Vue-Plugin-HiPrint，首先需要安装它。可以使用 npm
npm install vue-plugin-hiprint --save
二、在main.js中引入 Vue-Plugin-HiPrint
在您的 main.js 或任何其他入口文件中，您可以按以下方式引入它：
1、main.js中引入
//打印hiprint
import {VuePluginHiPrint,disAutoConnect} from 'vue-plugin-hiprint';Vue.use(VuePluginHiPrint).mount('#app').$nextTick(() => {disAutoConnect();})
这会将 Vue-Plugin-HiPrint 注册为 Vue 插件，使其可用于您的整个应用程序。
2、组件中引入
import {hiPrintPlugin } from 'vue-plugin-hiprint'三、创建打印模板
网址：hiprint.io
建议：将json保存到数据库中，或者保存在字典数据中
四、引入样式
创建了打印模板后，可以在Vue 组件中使用 Vue-Plugin-HiPrint 来触发打印操作。首先，先要在项目的index.html文件中引入print-lock.css样式文件，这个文件在node_modules/vue-plugin-hiprint/dist/目录。
注意：需复制一份print-lock.css样式文件放到与index.html同级目录下，否则打印样式有问题（我复制在public文件夹中）。在index.html文件中添加
<!-- * 以处理打印所需css, 当然你也可以自行处理-->
<!-- * 比如： index.html目录下放一个print-lock.css, 然后在index.html添加:-->
<link rel="stylesheet" type="text/css" media="print" href="/public/print-lock.css">不加会出现样式问题，例如批次打印都堆叠在第一页
五、组件中使用打印
使用按钮触发打印事件
<el-col :span="1.5"><el-button type="warning" v-hasPermi="['hm-cell-info:edit']" plain icon="edit" @click="handleBatchPrint">打印库位条形码</el-button></el-col>
//打印按钮
function handleBatchPrint(){hiPrintPlugin.disAutoConnect(); //取消自动打印直接连接客户端hiprint.init();//初始化let hiprintTemplate= new hiprint.PrintTemplate({template: JSON.parse(printTemplate.value),});//printTemplate是打印模板jsonlet printData= selectData.value;//选中数据数组console.log("打印数据",printData)hiprintTemplate.print(printData)//触发打印}六、问题处理
错误一：报错webSocket
解决方式：在main.js中添加disAutoConnect方法
错误二：条码重叠
解决方式：index.html中导入print-lock.css样式
参考网址：
【vue-plugin-hiprint】常见问题汇总① (qq.com)