一维码二维码的生成及打印

article/2025/8/26 6:42:10

VUE条形码及二维码的生成及输出到打印机

文章目录

    • VUE条形码及二维码的生成及输出到打印机
      • 1. 条形码的生成
      • 2. 二维码的生成
      • 3. 输出打印
      • 4. 将代码提取一下

1. 条形码的生成

  • 安装插件

    npm install jsbarcode --save

    github地址： https://github.com/lindell/JsBarcode

  • 接口说明

    JsBarcode(selector, data, options)
selector: css选择器
data: 条形码的内容
options: 配置

    options的可选项：

    OptionDefault valueType
    format“auto” (CODE128)String
    width2Number
    height100Number
    displayValuetrueBoolean
    textundefinedString
    fontOptions“”String
    font“monospace”String
    textAlign“center”String
    textPosition“bottom”String
    textMargin2Number
    fontSize20Number
    background“#ffffff”String (CSS color)
    lineColor“#000000”String (CSS color)
    margin10Number
    marginTopundefinedNumber
    marginBottomundefinedNumber
    marginLeftundefinedNumber
    marginRightundefinedNumber
    validfunction(valid){}Function

  • 使用

    <canvas id="barCode"></canvas>import JsBarcode from 'jsbarcode'
bindBarCode(selector, data = '1129867908') {JsBarcode(selector, data, {background: '#eee',displayValue: false,// width: 1,height: 80, // 一维码的高度margin: 10  // 一维码与容器的margin})
}mounted() {this.bindBarCode('#barCode')
}

    这里不能在created中调用，因为created钩子执行的时候页面还没有进行渲染，会找不到页面元素报错

  • 执行结果

在这里插入图片描述

2. 二维码的生成

  • 安装插件

    npm install qrcode -S

    https://www.npmjs.com/package/qrcode#qr-code-options

  • 接口说明(这里只介绍toCanvas)

    QRCode.toCanvas(element, data, options)element: 元素名字
data: 二维码的数据
options: 配置选项

  • 使用

    <canvas id="qrCode"></canvas>import QRCode from 'qrcode'
bindQRCode(ele = 'qrCode') {QRCode.toCanvas(document.getElementById(ele), '你是猪吗，乱扫什么码', {// version: 1,errorCorrectionLevel: 'L', //low, medium, quartile, high or L, M, Q, HmaskPattern: 7, // 0, 1, 2, 3, 4, 5, 6, 7margin: 5, // Define how much wide the quiet zone should bescale: 4,width: 100, //宽度color: {light: '#eee', // 背景色dark: '#ff0000' // 二维码颜色}}, (error) => {if (error) {console.error(error)}console.log('success!');})
}
mounted() {this.bindQRCode()
}

  • 执行结果

在这里插入图片描述

3. 输出打印

打印其实是一样的，因为条形码和二维码都在canvas上，所以我们只要将canvas放到img中，调用window的print方法即可，下面打印十个二维码为例

  • 给出二维码的容器

    <!--十个二维码的容器-->    
<canvas v-for="i in 10" :id="'qrCode' + i"></canvas>
<!--打印按钮-->
<el-button @click="printQRCode">打印</el-button>

  • 为容器填充二维码

    // 在mounted钩子中调用刚刚定义好的方法
// 打印条形码只需更改一下调用的方法即可
mounted() {for (let i = 1; i < 11; i++) {this.bindQRCode('qrCode' + i)}
}

  • 效果

在这里插入图片描述

  • 编写打印方法

    printQRCode() {// 打开一个容纳打印内容的窗口const newWin = window.open("")for (let i = 1; i < 11; i++) {// 获取画布const canvas = document.getElementById('qrCode' + i)// 将画布转成url地址放到img上const url = canvas.toDataURL()const img = document.createElement('img')img.style = "width: 100px;height:100px"img.src = url// 将img放到newWin中newWin.document.body.append(img)}newWin.document.close(); //在IE浏览器中使用必须添加这一句newWin.focus(); //在IE浏览器中使用必须添加这一句// 我想此处延迟100ms是为了等新窗口渲染// 不延迟的话有时候img中会为空白，也就是还没有渲染完成就已经开始打印setTimeout(function() {newWin.print() //打印newWin.close() //关闭窗口}, 100)
}

  • 点击打印查看结果

在这里插入图片描述

4. 将代码提取一下

import QRCode from "qrcode"
import JsBarcode from "jsbarcode";
import Quagga from "quagga";/*** 打印canvas画布* @param list canvas画布的id选择器* @param imgStyle 打印出来的每一张img的css*/
export function printCanvas(list, imgStyle = "height:100px") {// 打开一个容纳打印内容的窗口const newWin = window.open("")for (let selector of list) {console.log(selector)// 获取画布const canvas = document.querySelector(selector)// 将画布转成url地址放到img上const url = canvas.toDataURL()const img = document.createElement('img')img.style = imgStyleimg.src = url// 将img放到newWin中newWin.document.body.append(img)}newWin.document.close(); //在IE浏览器中使用必须添加这一句newWin.focus(); //在IE浏览器中使用必须添加这一句setTimeout(function() {newWin.print(); //打印newWin.close(); //关闭窗口}, 100);
}/*** 扫描一维码* @param selector 容器的css选择器* @param success 成功回调，参数为扫描到的内容* @param errorCall 失败回调*/
export function initQuagga(selector, success = (data) => {}, errorCall = (err) => {}) {Quagga.init({inputStream : {name : "Live",type : "LiveStream",target: selector, // Or '#yourElement' (optional)constraints: {width: 640,height: 480,facingMode: "environment",deviceId: "7832475934759384534"},},decoder : {readers : ["code_128_reader"]}}, function(err) {if (err) {errorCall(err)return}Quagga.start();});Quagga.onDetected(data => {success(data)Quagga.stop()document.querySelector(selector).innerHTML = ''})
}/*** 生成条形码* @param selector css选择器* @param data 条形码的数据*/
export function bindBarCode(selector, data) {JsBarcode(selector, data, {background: '#eee',displayValue: false,width: 1.5,height: 80, // 一维码的高度margin: 10  // 一维码与容器的margin})
}/*** 生成二维码函数* @param element 二维码容器 需要canvas元素* @param data 二维码的数据* @param success 成功回调* @param errorCall 失败回调*/
export function bindQRCode(element, data, success = () => {}, errorCall = (err) => {}) {QRCode.toCanvas(element, data, {// version: 1,errorCorrectionLevel: 'L', //low, medium, quartile, high or L, M, Q, HmaskPattern: 7, // 0, 1, 2, 3, 4, 5, 6, 7margin: 5, // Define how much wide the quiet zone should bescale: 4,width: 100, //宽度color: {light: '#eee', // 背景色dark: '#000000' // 二维码颜色}}, (error) => {if (error) {errorCall(error)}// 回调成功函数success()})
}

<template><qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
</template><script>
import {QrcodeStream} from 'vue-qrcode-reader'
export default {name: "QRCodeScanner",components: {QrcodeStream},methods: {onDecode (result) {this.$emit('decode', result)},async onInit (promise) {try {await promise} catch (error) {if (error.name === 'NotAllowedError') {this.error = "ERROR: 您需要授予相机访问权限"} else if (error.name === 'NotFoundError') {this.error = "ERROR: 这个设备上没有摄像头"} else if (error.name === 'NotSupportedError') {this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)"} else if (error.name === 'NotReadableError') {this.error = "ERROR: 相机被占用"} else if (error.name === 'OverconstrainedError') {this.error = "ERROR: 安装摄像头不合适"} else if (error.name === 'StreamApiNotSupportedError') {this.error = "ERROR: 此浏览器不支持流API"}}}}
}
</script><style scoped></style>

到此就完成了，感谢您的阅读！


http://chatgpt.dhexx.cn/article/Spjr1xCW.shtml

相关文章

C#二维码的生成及打印

C#二维码的生成及打印

窗体设计显示图 一&#xff0c;生成二维码 /// <summary>/// 生成二维码/// </summary>/// <param name"text">内容</param>/// <param name"width">宽度</param>/// <param name"height">高度</p…
阅读更多...
生成二维码，并且打印

生成二维码，并且打印

生成二维码&#xff0c;并且打印出来 加入依赖 //二维码依赖 npm install --save qrcodejs2 //打印依赖 npm install vue-print-nb --save在mian文件夹中使用引入并使用&#xff0c;或者按需引入 //打印依赖 import Print from vue-print-nb Vue.use(Print)本次二维码是按需引…
阅读更多...
二维码打印

二维码打印

1. 二维码简介 二维码&#xff08;2-dimensional bar code&#xff09;&#xff0c;又称二维条码&#xff0c;它是用特定的几何图形按一定规律在平面&#xff08;二维方向&#xff09;上分布的黑白相间的图形&#xff0c;是所有信息数据的一把钥匙。在现代商业活动中&…
阅读更多...
vue生成条形码和二维码并打印

vue生成条形码和二维码并打印

文章目录 前言一、生成条形码二、生成二维码三、效果图四、打印 前言 最近有一个需求&#xff0c;需要将产品信息生成标签&#xff0c;每个信息生成一个条形码&#xff0c;拿到所有数据生成二维码&#xff0c;最后打印标签。 一、生成条形码 使用jsbarcode&#xff0c;直接in…
阅读更多...
vue二维码生成、打印及识别

vue二维码生成、打印及识别

生成二维码 引入QRCode模块 npm install --save qrcode import QRCode from qrcode; 页面代码 批量创建二维码及打印&#xff0c;所以加了个v-for <div id"printDiv"/**后面打印用到的区域id*/ :disabled"hussar_20Disabled" ref"hussar_20Ref&quo…
阅读更多...
如何将内网ip映射到外网

如何将内网ip映射到外网

这个百度经验上就有&#xff0c;不过对于着急使用的我来说&#xff0c;差了最后一步。所以还是一起记上吧。 第一步 首先登陆你的路由器&#xff0c;就改密码那个。一般就用浏览器直接打开192.168.1.1就可以&#xff0c;账号密码有可能是 admin admin吧&#xff0c;默认可能是…
阅读更多...
VMWare虚拟机局域网网络配置，主机访问虚拟机上的网站（端口映射）

VMWare虚拟机局域网网络配置，主机访问虚拟机上的网站（端口映射）

文章目录 1 problem2 背景知识3 配置主机网络4 配置虚拟机网络 1 problem 如题&#xff0c;现在虚拟机的80端口和8080端口都有一个网站&#xff0c;我们想要在主机访问它。 2 背景知识 VmWare支持3种网络连接模式。 1、桥接模式&#xff1a; 所谓桥接就是把两个本来分开…
阅读更多...
映射公网的几种方式

映射公网的几种方式

转载自&#xff1a;http://blog.csdn.net/sadshen/article/details/48240519 这篇文章花了好几天&#xff0c;系统地梳理出了映射公网的几种方式。虽然是针对微信开发的外网服务器来寻找解决方案&#xff0c;但这个知识梳理可能会在其他地方也受益。平常我也有用TeamViewer&…
阅读更多...
VMware NAT端口映射 外网可以访问内网虚拟机

VMware NAT端口映射 外网可以访问内网虚拟机

我想尝试的是利用本机的ipport来访问虚拟机上的web服务器&#xff0c;因为这样的话&#xff0c;我就能够将我的web服务器部署成为一个能让外网访问的服务器了&#xff0c;首先说下我的环境&#xff1a; 主机&#xff1a;系统win7&#xff0c;ip地址172.18.186.210 虚拟机版本是…
阅读更多...
如何把内网IP映射到公网IP

如何把内网IP映射到公网IP

鸽子出品 2017-12-05 22:28:22 我们讲了如何搭建网站&#xff0c;可是有很多小伙伴私信跟我说怎么映射&#xff0c;今天我就教大家如何把内网地址映射到公网&#xff01; 我们所需要的工具有&#xff1a; 内网IP&#xff08;这个是品&#xff0c;也是必有的&#xff01;&…
阅读更多...
简单内网映射到公网方法--免费

简单内网映射到公网方法--免费

我是一名Android API Player&#xff0c;最近公司需要做微信公众号二次开发&#xff0c;我跟着学学&#xff0c;公司后台.net。 我mac安装windows之后用vs感觉太差了&#xff0c;可能是我的mac要淘汰了吧。 所以我决定用java后台来跟着做。 仔细一想我没有服务器啊。 再仔细…
阅读更多...
本地主机搭建服务器后如何让外网访问？快解析内网端口映射

本地主机搭建服务器后如何让外网访问？快解析内网端口映射

本地主机搭建应用、部署服务器后&#xff0c;在局域网内是可以直接通过计算机内网IP网络地址进行连接访问的&#xff0c;但在外网电脑和设备如何访问呢&#xff1f;由于内网环境下&#xff0c;无法提供公网IP使用&#xff0c;外网访问内网就需要一个内外网转换的介质。这里介绍…
阅读更多...
内网和外网之间的通信（端口映射原理）

内网和外网之间的通信（端口映射原理）

内网和外网之间的通信&#xff08;端口映射原理&#xff09; 首先解释一下“内网”与“外网”的概念&#xff1a; 内网&#xff1a;即所说的局域网&#xff0c;比如学校的局域网&#xff0c;局域网内每台计算机的IP地址在本局域网内具有互异性&#xff0c;是不可重复的。但两…
阅读更多...
实现内网通过外网域名访问NAT映射的内网服务器

实现内网通过外网域名访问NAT映射的内网服务器

大家都知道在用Huawei的中低端路由器做NAT地址映射时只能支持 “外网访问” 不支持 “内网访问”。也就是说只支持NAT映射后外网IP通过外网域名&#xff08;外网IP&#xff09;访问NAT映射的服务器 &#xff0c;不支持NAT映射后内网IP通过外网域名&#xff08;外网IP&#xff0…
阅读更多...
给内网映射增加安全防护

给内网映射增加安全防护

1.背景 内部网络资源的访问&#xff0c;通用的做法是部署企业VPN&#xff0c;通过VPN设备提供公网接入服务&#xff0c;客户端接入后&#xff0c;则可以像本地网络一样访问内网资源。但是部署VPN需要专业设备&#xff0c;且配置管理往往需要专业人员&#xff0c;对普通小…
阅读更多...
公网映射思路

公网映射思路

1、使用环境 目前政务微信的有两台内网环境71和14服务器&#xff0c;外网不能访问&#xff0c;只能内部访问&#xff0c;但是项目部署在14上面71的nginx转发到14服务器上面&#xff0c;但是现在14的项目需要网络支持&#xff0c;另外需要一台公网环境180服务器。 2、公网环境…
阅读更多...
外网做ip映射访问内网链接

外网做ip映射访问内网链接

首先这个外网必须是独立ip 然后在路由器设置ip映射&#xff0c;注意防火墙放通该端口&#xff0c;可以telnet连一下试试有没通
阅读更多...
几种内网映射到公网的方法

几种内网映射到公网的方法

1、windows_386_ngork ngrok.exe用来将内网映射到外网上&#xff0c;即让外网能访问局域网内本地的应用&#xff0c;例如在外网访问你本地http://127.0.0.1指向的Web站点。下载windows_386_ngork软件&#xff0c;可以到官网下载&#xff0c;可以直接用我提供的下载地址&#x…
阅读更多...
云服务器部署内网穿透映射本地服务

云服务器部署内网穿透映射本地服务

项目开发时需要和前端联调&#xff0c;考虑使用内网穿透避免每次上传服务部署的过程 下载frp &#xff08;开源内网穿透、反向代理工具&#xff09; https://github.com/fatedier/frp/releases/上传云服务器并解压&#xff08;使用xftp等工具上传&#xff09; tar -zxvf frp_0…
阅读更多...
内网与外网及内网映射的概念

内网与外网及内网映射的概念

内网与外网及内网映射的概念 所谓内网&#xff0c;也就是局域网&#xff0c;一般是由几台电脑加上路由器和网线搭建起来&#xff0c;只能在局域网中通过路由器分配的IP地址来访问&#xff0c;且访问地址是动态的可变的。本机也算是一个相对独立的内网&#xff0c;本机的内网IP就…
阅读更多...
推荐文章

Copyright @ 2022~2023