Vue3使用hiprint——批次打印条码

敲厉害的燕宝

于 2024-09-26 20:53:19 发布

阅读量622

点赞数 9

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63456808/article/details/142577694

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

例图：打印编号

一、安装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是打印模板json
  let printData= selectData.value;//选中数据数组
  console.log("打印数据",printData)
  hiprintTemplate.print(printData)//触发打印

}