vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

生成二维码：

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

打印二维码

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

下载二维码

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

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

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

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:文章来源地址https://www.toymoban.com/news/detail-427527.html
```
  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: '',
	    },
	}
}