vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode

通过使用 qrcode 生成二维码，
使用 jszip 打包批量二维码文件，
使用 file-saver 下载打包好的zip文件，
使用 vue-print-nb 打印生成的二维码

生成二维码：

打印二维码

下载二维码

1. 批量生成二维码—安装依赖

![请添加图片描述](https://img-blog.csdnimg.cn/0d1ecbc8674e4c77b01988e79f7b2733.png

npm i qrcode --save
或
yarn add qrcode --save

2. 批量生成二维码—引入依赖

import QRCode from 'qrcode'

3. 批量生成二维码

<div class="qrcode-box" id="printMe"><div class="qrcode-item" v-for="item in ids" :key="item.id"><canvas :ref="'canvas' + item"></canvas><div class="device-info">设备名称：{{ checkDeviceMsg(item).deviceName }}</div><div class="device-info">设备编号：{{ checkDeviceMsg(item).lordDeviceNo }}</div></div>
</div>// 循环选中要生成二维码的内容  ids[1,2,3...] 设备idhandleCreateQR() {this.$nextTick(() => {for (let i = 0; i < this.ids.length; i++) {this.useqrcode(this.ids[i])}})},// 生成二维码useqrcode(e) {let canvas = this.$refs[`canvas${e}`][0] // 获取当前循环的domif (!canvas) return // 没有拿到dom直接返回const _this = this // 调用函数去生成二维码，参数依次为：二维码的容器、要生成的内容、配置项、回调函数 QRCode.toCanvas(canvas, `https://xxxxx?uid=${e}`, this.qrcodeForm, function (error) {if (error) {console.log(error);} else {canvas.toBlob(e => {// 把生成的二维码放到数组中_this.fileList.push({ deviceName: deviceInfo.deviceName, lordDeviceNo: deviceInfo.lordDeviceNo, file: e })})}});},

配置项：

width 二维码宽度
height 二维码高度
errorCorrectionLevel 二维码纠错级别，指二维码被遮挡可以扫出结果的区域比例
```
  L  7%M  15%Q  25%H  30%
```
color:
```
  dark     前景色light    背景色
```

4. 批量下载二维码—安装依赖

// 安装依赖
npm i jszip --save
npm i file-saver --save
或
yarn add jszip --save
yarn add file-saver -- save

5. 批量下载二维码—引入依赖

// 引入依赖
import JSZip from 'jszip'
import FileSaver from "file-saver";

6. 批量下载二维码

// 下载二维码
downLoadQrcode() {const zip = new JSZip() // 创建一个zip实例for (const key in this.fileList) {const item = this.fileList[key]// 把生成的二维码文件添加到zip中zip.file(`${key}二维码名称.png`, item.file, { binary: true })}Promise.all(this.fileList).then(res => {// 打包文件zip.generateAsync({ type: 'blob' }).then(content => {// 下载zip文件FileSaver.saveAs(content, "压缩文件.zip")})})
},

7. 打印生成的二维码—安装依赖

// 安装依赖
npm i vue-print-nb --save
或
yarn add vue-print-nb --save

8. 打印生成的二维码


<el-button v-print="print">打印</el-button>data(){return {print: {id: 'printMe',popTitle: '设备二维码', // 打印配置页上方标题extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）previewTitle: '', // 打印预览的标题（开启预览模式后出现）,previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）beforeOpenCallback() { }, // 开启打印前的回调事件openCallback() { }, // 调用打印之后的回调事件closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）url: '',standard: '',extraCss: '',},}
}

vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode相关推荐

【流媒体服务】安装推流转码工具（三）：【1】下载安装ffmpeg推流转码工具
文章目录前言一.下载ffmpeg 二.安装ffmpeg 1.下载解压 2.添加系统变量三.安装成功验证四.总结前言上一章 [流媒体服务]推流拉流体验(二):[1]使用VLC轻松体验本地视频 ...
易语言下载别人的源码编译出来用不了_如何编译下载的易语言源码
很多刚刚接触易语言的网友不知道怎么使用易语言源码,其实易语言的源码也不过是一个加密的文本,里面只有易语言代码,要想使用需要使用易语言打开并编译为exe文件才能使用 1.易语言的源码是以 .e 为后缀的 ...
量具管理－量具生成和二维码打印
量具管理-量具生成和二维码打印只要选择量具分类,按下＂生成新量具＂按钮可以自动生成量具并能打印二维码建立文件createclass.py # -*- coding: utf-8 -*- impor ...
Android 蓝牙二维码打印,打印图片,二维码加文字布局,蓝牙连接
蓝牙二维码打印,工厂物料条码,绝对好用资源下载地址:点击下载扫描,显示蓝牙列表 public class DeviceListActivity extends AppCompatActivity ...
[Android编译(二)] 从谷歌官网下载android 6.0源码、编译并刷入nexus 6p手机
1 前言经过一周的奋战,终于从谷歌官网上下载最新的Android 6.0.1_r62源码,编译成功,并成功的刷入nexus6p,接着root完毕,现写下这篇博客记录一下实践过程. 2 简介自己下载 ...
从谷歌官网下载android 6.0源码、编译并刷入nexus 6p手机
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/fuchaosz/article/details/52473660 1 前言经过一周的奋战,终于从谷 ...
java实现二维码生成及调用打印机打印
在开发二维码打印的过程中走过几次弯路,所以在这里特意将其记录下来留作备忘.一开始参考其他博主写的文章,有介绍通过编写JAVA后台代码来获取本地默认打印机的驱动实现打印.BUT!这样就导致在本地开发测试 ...
java生成二维码打印到浏览器
java生成二维码打印到浏览器解决方法: pom.xml的依赖两个jar包: <!-- https://mvnrepository.com/artifact/com.google.zxing/ ...
解决某物流企业二维码打印问题
以下文章是在解决客户问题时对二维码的感受,希望能给大家提供一些参考. 1问题背景浙江某医药物流有限公司(以下简称:A物流公司)系某有限责任公司控股的全资子公司,现已投入使用的物流中心面积达6万平方米 ...

vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode

生成二维码：

打印二维码

下载二维码

1. 批量生成二维码—安装依赖

2. 批量生成二维码—引入依赖

3. 批量生成二维码

4. 批量下载二维码—安装依赖

5. 批量下载二维码—引入依赖

6. 批量下载二维码

7. 打印生成的二维码—安装依赖

8. 打印生成的二维码

vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode相关推荐

最新文章

热门文章