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

news2024/11/16 21:21:14

前端生成条形码并打印

在这里插入图片描述

安装依赖:
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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1418306.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot + Mybatis 快速入门实战

一.创建Spring项目 出现报错的话&#xff0c;换一个jdk创建&#xff0c;一般java 8 选择Spring Web 测试一下 默认端口8080&#xff0c;但是Vue也需要8080&#xff0c;因此&#xff0c;后端设置一个端口3000 再次测试&#xff0c;成功 此处&#xff0c;如何kill一个端口占…

人生,就是一场断舍离

常言道&#xff1a;“尽人事&#xff0c;听天命。”人世间&#xff0c;除了生死皆是小事&#xff0c;不必过度留恋&#xff0c;不必消耗自己&#xff0c;当你不懂得断舍离&#xff0c;你会发现&#xff0c;人生会痛苦不少。有时候&#xff0c;我们不会被难题所击倒&#xff0c;…

一键部署私有化的思维导图SimpleMindMap

简介 SimpleMindMap 是一个可私有部署的web思维导图工具。它提供了丰富的功能和特性&#xff0c;包含插件化架构、多种结构类型&#xff08;逻辑结构图、思维导图、组织结构图等&#xff09;、节点内容支持文本、图片、图标、超链接等&#xff0c;支持拖拽、导入导出功能、快捷…

cocos creator 调用预设体Prefab中的方法(调用另一个节点的方法)

调用预设体中的方法 通过cc.instantiate(this.star)创建这个预设体实例这个star预设体中添加了一个脚本组件star.ts 获取到这个脚本组件star.getComponent(‘star’).test()&#xff0c;并调用其中的test()方法同理可以用该方式像另一个节点中传值 //星星预设体property(cc.Pr…

最新GPT4.0使用教程,AI绘画-Midjourney绘画,GPT语音对话使用,DALL-E3文生图+思维导图一站式解决

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画&#xff0c;文档对话总结DALL-E3文生图&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和…

【C++杂货铺】详解类和对象 [中]

博主&#xff1a;代码菌-CSDN博客 专栏&#xff1a;C杂货铺_代码菌的博客-CSDN博客 目录 &#x1f308;前言&#x1f308; &#x1f4c1; 类的6个默认成员函数 &#x1f4c1; 构造函数 &#x1f4c2; 概念 &#x1f4c2; 特性&#xff08;灰常重要&#xff09; &#x1f4c…

用友U8接口-部署和简要说明(1)

概括 本专栏文章目的说明对目前用友U8ERP接口介绍对底层接口二次封装的介绍 说明 过去发布过介绍U8接口文章简介&#xff0c;参考以下链接。 U8接口开发方式 本专栏文章与下面的HTTP接口相辅相成&#xff0c;主要是写给正在使用&#xff0c;或未来使用本套接口的开发人员&am…

Harmony的自定义组件和Page的数据同步

在开发过程中会经常使用自定义组件,就会遇到一个问题,在页面中引入组件后,如何把改变的值传递到自定义组件中呢,这就用到了装饰器,在这是单向传递的,用的装饰器是@State和@Prop @State在page页面中监听数据的变化 @Prop在自定义组件中监听page页面传递过来的变化值,并赋…

关于开展人工智能从业人员“计算机视觉处理设计开发工程师”专项培训(第二期)的通知!

近日我们刚刚结束了《计算机视觉处理设计开发工程师》证书第一期培训&#xff0c;培训效果良好&#xff0c;所有学员均通过工信部统一线上考试&#xff0c;坐等证书了。鉴于学员们的反应我们第二期课程如约而至。 证书出台背景&#xff1a;为进一步贯彻落实中共中央印发《关于深…

VMware中CentOS 7解决网络问题

问题描述 在 VMware 中使用 CentOS 7 中使用 ping www.baidu.com 测试网络是否能正常连接。 出现了未知的名称和服务的问题&#xff1a; 解决方案一 在服务中检查 VMware NAT Service 是否开启 解决方案二 在控制面板中的网络适配器里检查 解决方案三 检查VMware中的网络适…

DAY10_SpringBoot—SpringMVC重定向和转发RestFul风格JSON格式SSM框架整合Ajax-JQuery

目录 1 SpringMVC1.1 重定向和转发1.1.1 转发1.1.2 重定向1.1.3 转发练习1.1.4 重定向练习1.1.5 重定向/转发特点1.1.6 重定向/转发意义 1.2 RestFul风格1.2.1 RestFul入门案例1.2.2 简化业务调用 1.3 JSON1.3.1 JSON介绍1.3.2 JSON格式1.3.2.1 Object格式1.3.2.2 Array格式1.3…

Python第十二章(函数2)

一。变量作用域&#xff1a; 1.局部变量&#xff1a;定义于函数内部&#xff0c;生效在函数&#xff0c;外部不生效 作用&#xff1a;临时保存数据&#xff0c;当函数调用完毕后&#xff0c;则摧毁局部变量 2.全局变量&#xff1a;定义于函数体外面&#xff0c;在函数体外面…

实现元素进入界面的平滑效果

先看效果&#xff1a; 实现思路&#xff1a;获取页面中需要加载动画的节点&#xff0c;用元素的animate()方法创建一个动画对象&#xff0c;并传入两个关键帧&#xff0c;接着使用IntersectionObserverAPI创建观察对象&#xff0c;用于观察元素进入页面。当元素进入界面时&…

sqli.labs靶场(第18~22关)

18、第十八关 经过测试发现User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0加引号报错 这里我们闭合一下试试 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0,127.0.0.1,adm…

漏洞原理linux操作系统的SqlMap工具的使用

漏洞原理linux操作系统的SqlMap工具的使用 Linux操作系统基础操作链接: 1024一篇通俗易懂的liunx命令操作总结(第十课)-CSDN博客 kali的IP地址:192.168.56.1 实操 # kali中使用sqlmap http://192.168.56.1/ sqlmap -u http://192.168.56.1/news/show.php?id46 sqlmap -u …

线程锁多线程的复习

线程 实现方式3种乐观锁&悲观锁线程池线程池总结 进程:是正在运行的程序 线程:是进程中的单个顺序控制流,是一条执行路径 实现方式3种 1.Thread //步骤一:定义一个继承Thread的类 //步骤二:再定义的类中重写run()方法 //步骤三:创建定义类对象 //步骤四:启动线程 class M…

轮廓测长|轮廓仪高精度测量粗糙度

现代工业制造领域中&#xff0c;为什么测量粗糙度至关重要&#xff1f;在现代工业制造领域中&#xff0c;测量粗糙度是一项非常重要的工作。因为粗糙度能够影响到工件的功能性能和外观质量。当我们制造机器零件或工具时&#xff0c;需要确保表面的光洁度能够满足设计要求。过高…

iOS 自动打包 命令之如何获取PROVISIONING_PROFILE

获取描述文件UUID&#xff1a; 首先在Finder中前往/Users/用户名/Library/MobileDevice/Provisioning Profiles路径 然后在Provisioning Profiles文件夹中选择打包需要的描述文件&#xff0c;一般描述文件的文件名都是由UUID组成的&#xff0c;如果文件名不是由UUID组成的&…

STM32入门教程-2023版【5-1】EXTI外部中断

关注 点赞 不错过精彩内容 大家好&#xff0c;我是硬核王同学&#xff0c;最近在做免费的嵌入式知识分享&#xff0c;帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作! 本节主要讲的是&#xff0c;中断系统和外部中断&#xff0c;依靠外部中断来学习中断系统 中断系统&…

idea docker 内网应用实践

文章目录 前言一、服务器端1.1 离线安装docker1.2 开启docker远程访问1.3 制作对应jdk镜像1.3.1 下载jdk171.3.2 Dockerfile 制作jdk17镜像1.3.3 镜像导出1.3.4 服务器引入镜像 二、Idea 配置2.1 Dockerfile2.2 pom 引入docker插件2.3 idea docker插件配置2.4 打包镜像上传2.5 …