Demo: 前端生成条形码并打印

前端生成条形码并打印

安装依赖：
npm i print-js // 打印
npm i jsbarcode // 生成条形码

<template>
    <div id="printContent" style="display: none;">
        <div id="elTable">
            <div class="name">名称：{{ printInfo.name }}</div>
            <div class="name">品牌：{{ printInfo.brand }}</div>
            <div class="name">型号：{{ printInfo.model }}</div>
            <!-- 显示条形码 -->
            <canvas class="barcode" ref="barcodeRef"></canvas>
        </div>
    </div>
    <el-button type="success" @click="pdfPrint">打印pdf文件</el-button>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import printJS from "print-js";
import JsBarcode from 'jsbarcode'; // 导入JsBarcode库

const barcodeRef = ref(null) // 条形码实例
// 打印信息
const printInfo = ref({
    name: '大疆无人机',
    brand: '南方',
    model: 'model'
})

// 生成条形码
const generateBarcode = () => {
    const canvas = barcodeRef.value; // 获取到canvas元素
    // 传递参数生成条形码
    JsBarcode(canvas, "No.202401250212118948", {
        format: "CODE128",//条形码的格式
        width: 2, //线宽
        height: 48, //条码高度
        lineColor: "#000", //线条颜色
        displayValue: true, //是否显示文字
        margin: 2, //设置条形码周围的空白区域
    })
}

// 打印
const pdfPrint = () => {
    printJS({
        printable: 'elTable', // HTML内容
        type: "html", // 打印类型
        header: "", // '表单名称',
        targetStyles: ["*"],
        style: "@page {margin:1mm 1mm};", // 可选-打印时去掉眉页眉尾
        ignoreElements: ["no-print"], // 接受打印父 html 元素时应忽略的 html id 数组。
        properties: null,
    })
}

onMounted(() => {
    generateBarcode()
})
</script>
  
<style lang="scss">
#elTable {
    width: 200px;

    .barcode {
        width: 192px;
    }
}
</style>