Generate a QR code by using qrcode,
use jszip to package batch QR code files,
use file-saver to download the packaged zip file, and
use vue-print-nb to print the generated QR code
Generate QR code:
print QR code
Download QR code
1. Generate QR codes in batches—installation dependencies
![Please add a picture description](https://img-blog.csdnimg.cn/0d1ecbc8674e4c77b01988e79f7b2733.png
npm i qrcode --save
或
yarn add qrcode --save
2. Generate QR codes in batches—introduce dependencies
import QRCode from 'qrcode'
3. Generate QR codes in batches
<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...] 设备id
handleCreateQR() {
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] // 获取当前循环的dom
if (!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 })
})
}
});
},
Configuration items:
-
width QR code width
-
height QR code height
-
errorCorrectionLevel QR code error correction level, refers to the proportion of the area where the QR code is blocked and the result can be scanned
L 7% M 15% Q 25% H 30% -
color:
dark 前景色 light 背景色
4. Download QR codes in batches—installation dependencies
// 安装依赖
npm i jszip --save
npm i file-saver --save
或
yarn add jszip --save
yarn add file-saver -- save
5. Download QR codes in batches—introduce dependencies
// 引入依赖
import JSZip from 'jszip'
import FileSaver from "file-saver";
6. Download QR codes in batches
// 下载二维码
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. Print the generated QR code—installation dependencies
// 安装依赖
npm i vue-print-nb --save
或
yarn add vue-print-nb --save
8. Print the generated QR code
<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: '',
},
}
}