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

本文主要是介绍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>