通过使用 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...] 设备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 })
})
}
});
},
配置项：
-
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: '',
},
}
}