Vue3驱动标签打印机，本案例驱动的是斑马ZD888-CSDN博客

vue开发过程中用于产品标签打印过程中，驱动打印条码，实现动态打印

1.安装打印插件

npm i print-js

2.条形码生成

npm install jsbarcode --save

3.二维码生成

npm install vue-qrcode

4.代码案例

<script setup>
import QRCode from 'qrcode';
import { ref, onMounted } from 'vue';
import JsBarcode from 'jsbarcode';
import printJS from "print-js";


// 定义一个处理打印的函数
const handlePrint = () => {
  printJS({
    printable: 'printContent', // 确保与要打印的div的id一致
    type: 'html', // 明确指定打印类型为HTML
    targetStyles: ['*'], // 可选：尝试继承所有样式，确保打印效果
    // 可以根据需要添加其他配置...
    style: `
      /* 可选：添加额外的或覆盖性的样式 */
      body {
      fontSize: 5mm,
        font-family: Arial, sans-serif;
      }
    `
  });
};

const barcodeSvg = ref(null); // 用于绑定 SVG 元素的 ref
const text = ref('1234567890');
const qrCodeUrl = ref('');
const printConfig = {
  id: 'printContent',        // 要打印的元素ID
  preview: false,             // 是否开启预览模式（默认false）
  previewTitle: '打印预览',   // 预览窗口的标题
  previewPrintBtnLabel: '确认打印', // 预览窗口中打印按钮的文字
  zIndex: 1000,             // 预览窗口的z-index值

};

onMounted(() => {
  generate() ;
});


 function generateBarcode() {
  if (barcodeSvg.value) {
    JsBarcode(barcodeSvg.value, text.value, {
      format: 'CODE128',
      lineColor: '#000',
      width: 2,
      height: 35,
      displayValue: true,
      fontSize: 25,
      margin: 2, // 缩小边距
      marginTop:0
    });
  }
}

async function generateQRCode() {
try {
   if (barcodeSvg.value) {
        const options = {
      width: 150, // 自定义宽度
      margin: 2, // 缩小边距
      color: {
        dark: '#000',   // 深色部分（二维码本身）的颜色，使用深蓝色
        light: '#fff' // 浅色部分（背景）的颜色，使用浅灰色
      },
      errorCorrectionLevel: 'H', // 高容错级别
      // type: 'image/jpeg', // 如果需要生成JPEG格式可以取消注释
      // quality: 0.8, // 如果使用JPEG，可以设置质量
    };
    qrCodeUrl.value = await QRCode.toDataURL(text.value,options);
   }

  } catch (err) {
    console.error(err);
  }
}
async function generate() {
  generateQRCode();/*二维码打印*/
  generateBarcode();/*条形码打印*/
}
</script>

<template>
    <input v-model="text" placeholder="输入条形码内容" @input="generate"> 
    <button v-print="printConfig">打印</button>
    <button @click="handlePrint">函数打印</button>
  <div  id="printContent" class="dydiv">
    <span>
        <svg  ref="barcodeSvg"></svg>
    </span>
    <span v-if="qrCodeUrl">     
     <img :src="qrCodeUrl" alt="二维码">
    </span>
  </div>

</template>
<style scoped>

svg{
  width: 49mm;
}
img{
  margin-top: 2mm;
  height: 17mm;
}
.dydiv{
  width: 70mm;/*标签打印机的宽度 */
  height: 19mm;/*标签打印机的高度 */
  font-size: 7mm;
}
</style>