vue3 实现打印条形码标签

image.png

1、安装jsbarcode插件

npm install jsbarcode --save

2、安装vue3-print-nb插件

npm install vue3-print-nb --save

3、main.js 引入

import print from 'vue3-print-nb'
app.use(print);

3、完整示例

<template>
  <div id="printTable">
    <barcode
      title="标题1"
      assetsNumber="11111"
      assetsName="笔记本电脑"
      assetsType="联想thinkpad r60"
      assetsData="2006-11-1"
      value="111-111"
    >
    </barcode>
    <barcode
      title="标题2"
      assetsNumber="222222"
      assetsName="笔记本电脑2"
      assetsType="联想thinkpad r6022"
      assetsData="2009-11-1"
      value="222-222"
    >
    </barcode>
  </div>
  <div class="btn">
    <el-button type="primary" v-print="'#printTable'">打印</el-button>
  </div>
</template>

<script setup>
import barcode from "./barcode.vue";
</script>
//去掉打印的页眉页脚
<style media="print">
@page {
  size: auto;
  margin: 3mm; 
}
</style>

barcode.vue

<template>
  <div>
    <div class="print-box">
      <h2 class="title">{{ title }}</h2>
      <div class="content">
        <ul>
          <li>资产编号：{{ assetsNumber }}</li>
          <li>资产名称：{{ assetsName }}</li>
          <li>规格程式：{{ assetsType }}</li>
          <li>使用日期：{{ assetsData }}</li>
        </ul>
        <svg class="barcode" ref="barcode"></svg>
      </div>
    </div>
  </div>
</template>

<script setup>
import JsBarcode from "jsbarcode";
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: "",
  },
  // 资产编号
  assetsNumber: {
    type: String,
    default: "",
  },
  // 资产名称
  assetsName: {
    type: String,
    default: "",
  },
  // 规格程式
  assetsType: {
    type: String,
    default: "",
  },
  // 使用日期
  assetsData: {
    type: String,
    default: "",
  },
  // 条形码值
  value: {
    type: String,
    required: true,
  },
  // 条形码格式
  format: {
    type: String,
    default: "CODE128",
    validator: (value) =>
      [
        "CODE128",
        "EAN13",
        "EAN8",
        "UPC",
        "CODE39",
        "ITF14",
        "MSI",
        "Pharmacode",
      ].includes(value),
  },
});
const barcode = ref(null);
onMounted(() => {
  if (barcode.value) {
    JsBarcode(barcode.value, props.value, {
      format: props.format,
      width: 1.3, //设置条之间的宽度
      height: 20, //高度
      fontSize: 12, //设置文本的大小
      background: "transparent", //设置条形码的背景
    });
  }
});
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.title {
  font-size: 16px;
  text-align: center;
}
.print-box {
  margin: 50px;
  height: 144px;
  width: 227px;
  background: #fff;
  .content {
    border: 1px solid #000;
  }
  li {
    border-bottom: 1px solid #000;
    padding: 1px 5px;
    list-style: none;
    font-size: 12px;
  }
  .barcode {
    display: block;
    margin: 0 auto;
  }
}
</style>