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>