vue3条码批量打印

0.先看效果

 

1 用到插件 jsbarcode

import JsBarcode from 'jsbarcode';

2.封装条码组件self-barcode， 使用:class绑定，防止取到重复的内容

记得在watch监听props变化，重绘条码

import SelfBarcode from '@/components/selfPack/selfBarcode';
app.component('SelfBarcode', SelfBarcode);

<template>
  <div>
    <svg :class="'barcode' + props.value"></svg>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import JsBarcode from 'jsbarcode';

const props = defineProps({
  // 数据
  // 当前的值
  value: String,
  type: String,
});
watch(props, () => {
  draw();
});
function draw() {
    JsBarcode('.barcode' + props.value, String(props.value), {
      format: 'CODE39', //选择要使用的条形码类型
      width: 1, //设置条之间的宽度
      height: 60, //高度
      displayValue: true, //是否在条形码下方显示文字
      //   text:"456",//覆盖显示的文本
      //   fontOptions:"bold italic",//使文字加粗体或变斜体
      //   font:"fantasy",//设置文本的字体
      //   textAlign:"left",//设置文本的水平对齐方式
      //   textPosition:"top",//设置文本的垂直位置
      //   textMargin:5,//设置条形码和文本之间的间距
      fontSize: 15, //设置文本的大小
      //   background:"#eee",//设置条形码的背景
      //   lineColor:"#2196f3",//设置条和文本的颜色。
      // margin: 25, //设置条形码周围的空白边距
      marginTop: 60,
      marginBottom: 0,
    });
}
onMounted(() => {
  nextTick(() => {
    draw();
  });
});
</script>

3.用封装好的组件进一步封装成业务组件self-goodsPrint

先在main,js中注册全局组件

import SelfGoodsPrint from '@/components/selfPack/selfGoodsPrint';
app.component('SelfGoodsPrint', SelfGoodsPrint);

<template>
  <div>
    <iframe style="display: none" ref="iframeRef" :srcdoc="barcodeCon" frameborder="0"></iframe>
    <div id="barcode" style="display: none">
      <div v-for="item in list" :value="item">
        <div style="display: flex; justify-content: space-between; margin: 0; font-size: 16px; width: 100%">
          <div>标题</div>
          <div>货品标签</div>
        </div>
        <div>
          <p style="margin: 0; font-size: 12px">货品名称:{{ item.materialName }}</p>
          <p style="margin: 0; font-size: 12px">物料编码:{{ item.materialNo }}</p>
          <p style="margin: 0; font-size: 12px">货主名称:{{ item.companyName }}</p>
        </div>
        <self-barcode  :key="item + new Date()" :value="item.serialNumber"> </self-barcode>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  list: {
    type: Array,
    default: [],
  },
});
const barcodeCon = ref('');
const iframeRef = ref(null);

function print() {
  //赋值
  barcodeCon.value = document.getElementById('barcode').innerHTML;
  setTimeout(function () {
    iframeRef.value.contentWindow.print();
  }, 100);
}
defineExpose({
  print,
});
</script>

4.页面调用，单条打印和批量打印，都传数组

  <self-goodsPrint :list="printList" ref="goodsPrintRef"></self-goodsPrint>

function handlePrintAll() {
 printList.value = [] //在这边给printList赋具体值
  setTimeout(function () {
    goodsPrintRef.value.print();
  }, 100);
}

5.条码打印机设置，纸张大小调整

开始菜单搜索设备，=》设备和打印机》找到指定打印机，右键打印机首选项设置纸张大小