使用VueBarcode结合vueEasyPrint打印条形码标签

目标：

生成标签并实现打印功能

---

学习步骤：

1、了解 VueBarcode
2、了解 VueEasyPrint
3、VueBarcode 实践
4、VueEasyPrint 实践
5、VueBarcode + VueEasyPrint 合体

---

💡许多人来问有没有案例代码，我大致抽取了一下，放置在最后供参考！

一、了解 VueBarcode

点击传送至官网

原文介绍：

JsBarcode是一个用JavaScript编写的条形码生成器。它支持多种条形码格式，可以在浏览器和Node.js中使用。当它用于web时，它没有依赖性，但如果您喜欢，它可以与jQuery一起使用。

甚至还有在线调试Demo😊

点击跳转 条码相关参数修改介绍

二、了解 VueEasyPrint

这是一个基于vue 2.0的打印组件

它的核心是使用vue组件的slot插槽进行模板加载。 使用iframe复制打印区域

点击跳转至官方文档

三、VueBarcode实践

1、先安装vue-barcode插件

npm install vue-barcode

2、引入 VueBarcode 并注册为组件

import VueBarcode from 'vue-barcode';

3、页面使用该组件

四、VueEasyPrint实践

1、按照官方教学快速入门安装

npm install vue-easy-print --save

2、引入VueEasyPrint并注册为组件

import vueEasyPrint from "vue-easy-print";

3、在页面中使用

4、配置props参数

		// 是否显示表格
        tableShow:{
            type:Boolean,
            default:false
        },
        // 每页多少行
        onePageRow: {
            type:Number,
            default:5,
        },

5、绑定打印按钮实现打印功能

五、VueBarcode + VueEasyPrint 合体

上面两步实践结合

将生成条码及逻辑代码放入打印组件中

效果

案例代码，仅供参考

<template>
    <div class="bg">
      <el-dialog 
        width="21cm"
        height="10cm" 
         :modal-append-to-body='false' title="样品标签" :visible.sync="scanVisible">
        <!-- 表单是否显示 -->
        <div style="height:500px">
            <div ref="qrcode" id="box">
            <vue-easy-print tableShow ref="easyPrint"
              :onePageRow="onePageRow"
            >
              <div v-for="(item, index1) in list" :key="index1"  >
                 <div class="All" style="font-family:sans-serif">
                  <div class="tagBox">
                    <div class="lh">
                      <div>样品名称：</div>
                      <div>{{ item.name }}</div>
                    </div>
                    <div class="la">
                      <div class="lh">
                        <div>样品编号：</div>
                        <div >{{ item.serial }}</div>
                      </div>
                    </div>
                    <div class="lh">
                      <div>样品类型：</div>
                      <div>{{ item.type }}</div>
                    </div>
                    <div class="la">
                      <div class="lh">
                        <div>存储条件：</div>
                        <div>{{ item.condition }}</div>
                      </div>
                    </div>
                    <div class="lh">
                        <div>样品数量：</div>
                        <div>{{ index2 + 1 }}/{{ item.num }}支</div>
                      </div>
                    <div class="lh" >
                        <div>收样时间：</div>
                        <div>{{ item.time }}</div>
                      </div>
                    <div class="lh">
                      <div>流转状态：</div>
                      <div>▢待检，▢已检，▢留样</div>
                    </div>
                   
                    <div class="ewm">
                      <vue-barcode :value="item.serial" :width="1.5" :height="15" :margin="0" :displayValue="false" ></vue-barcode>
                    </div>
                  </div>
                 </div>
              </div>
            </vue-easy-print>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
          <el-button type="primary" @click="printDemo">打印标签</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import VueBarcode from 'vue-barcode';
  import vueEasyPrint from "vue-easy-print";
  
  export default {
    components: {
      VueBarcode,
      vueEasyPrint
    },
    props: {
      obj: {
        default: [],
        type: Array
      },
      onePageRow:{
        type:Number,
        default:3
      },
      blankLines:{
        type:Boolean,
        default:true
      },
      scanVisible:{
        type:Boolean,
        default: false
      }
    },
    data() {
      return {
        value: '',
        id: '',
        list: [{
          name: '测试名称',
          serial: '测试编号',
          type: '测试类型',
          num: 1,
          condition: '测试条件',
          time:''
        }],
        visible: true
      }
    },
    watch: {
      obj() {
        this.getInit()
      }
    },
    created() {
      this.getInit()
    },
    methods: {
      printDemo() {
        this.$refs.easyPrint.print()
      },
      getInit() {
        let resultList = []
        // 查询数据，整理数据代码,最后归至resultList...
        this.list = resultList
      },
      
      /* 关闭*/
      remRedar() {
        this.visible = false // 列表隐藏
        this.listData = [] // 清空列表数据
        this.redar = false // 扫码图标隐藏
        this.$emit('scanOff', false)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .tagBox {
    width: 231px;
    position: relative;
    border: 1px solid #000000;
    padding: 2px;
    display: inline-block;
    margin: 10px 10px;
    border-radius: 4px;
    background-color: #fff;
  }
  .ewm{
    margin-left: 30px;
  }
  .la {
    display: flex;
    align-items: center;
  }
  
  .lh {
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  </style>

实现效果

另外一个样式，留给你们自己去实现🤔