添加：二维码下载功能

package.json

@@ -70,6 +70,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "qiniu-js": "^3.4.1",
+    "qrcode": "^1.5.1",
     "qrcodejs2": "0.0.2",
     "screenfull": "4.2.0",
     "script-loader": "0.7.2",

src/views/user/member/exchangeCode.vue

@@ -2,15 +2,6 @@
   <div class="divBox">
     <!--主要内容-->
     <el-card class="box-card">
-
-      <div>
-        <canvas
-          id="QRCode_header"
-          ref="canvas"
-          title="扫描二维码"
-        ></canvas>
-      </div>
-
       <!--顶部搜索栏-->
       <div slot="header" class="clearfix">
         <div class="container">
@@ -106,10 +97,6 @@
           @current-change="pageUserChange"
         />
       </div>
-
-
-
-
     </el-card>
   </div>
 </template>
@@ -117,7 +104,10 @@
 <script>
 import {exchangeCodeActivateForm, exchangeCodeBatchList, exchangeCodeEditForm, exchangeCodeList} from "@/api/user";
 import createWorkBook from "@/utils/newToExcel";
-import QRCode from "qrcodejs2";
+import QRCodeOld from "qrcodejs2";
+import QRCode from "qrcode";
+import JSZip from "jszip";
+import FileSaver from "file-saver";
 
 export default {
   name: "preSaleProductList",
@@ -159,13 +149,13 @@ export default {
         _this.$nextTick(function () {
           Object.values(res.data.list).forEach(item => {
             let refName = 'qrCodeImg'+item.id;
-            new QRCode(_this.$refs[refName], {
+            new QRCodeOld(_this.$refs[refName], {
               text: item.exchange_code, // 需要转换为二维码的内容
               width: 80,
               height: 80,
               colorDark: '#000000',
               colorLight: '#ffffff',
-              correctLevel: QRCode.CorrectLevel.H,
+              correctLevel: QRCodeOld.CorrectLevel.H,
             });
           })
         });
@@ -245,40 +235,69 @@ export default {
       })
     },
     // 二维码下载
-    downloadQrCode(exportData){
+    async downloadQrCode(exportData){
       let _this = this;
       let list = exportData.list || {};
-      // 循环处理
-      let opts = {
-        errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例
-        type: "image/png",//生成的二维码类型
-        quality: 0.3,//二维码质量
-        margin: 5,//二维码留白边距
-        width: 200,//宽
-        height: 200,//高
-        text: "",//二维码内容
-        color: {
-          light: "#eaeaea"//背景色
-        }
-      };
-      Object.values(list).forEach( item => {
-        opts.text = item[2];
-        QRCode.Drawing(_this.$refs.canvas, opts, function (error) {
-          console.log(error)
-          if(error){
-            console.log('加载失败！');
-          }
+      // 生成下载数据
+      const data = [];
+      for (const item of list) {
+        const base64 = await this.textQrcodeToBase64(item[2]);
+        data.push({
+          name: item[2],
+          value: base64,
         });
+      }
+      // 下载
+      this.dataUrlZip(data);
+    },
+    /**
+     * 将字符串生成二维码并且转成base64
+     * @param {要生成二维码的字符串} text
+     * @returns
+     */
+    textQrcodeToBase64(text) {
+      return new Promise((res, rej) => {
+        QRCode.toDataURL(
+          text, // 二维码字符串
+          {
+            type: "image/png", // 生成dataurl图片格式
+            width: 200, // 二维码宽度
+            quality: 0.8, // 质量
+            margin: 1, // 白边大小
+            color: {
+              dark: "#000", // 暗色颜色
+              light: "#fff", // 亮色颜色
+            },
+          },
+          (err, dataUrl)=> {
+            if (err) rej(err);
+            res(dataUrl.substring(22)); // substring(22)是去掉图片base64头
+          }
+        );
       });
+    },
+    /**
+     * 将base64字符串以png格式装进jszip, 然后下载保存到本地
+     * @param {Array} data {value: base64字符串, name: 二维码的名字}
+     */
+    dataUrlZip(data) {
+      const zip = new JSZip();
 
-      console.log(exportData)
+      for (const item of data) {
+        const { value, name } = item;
+        zip.file(name + ".png", value, {
+          base64: true,
+        });
+      }
 
+      // 以二进制形式保存、并且通过file-saver下载到本地
+      zip.generateAsync({ type: "blob" }).then( (content) =>{
+        FileSaver.saveAs(content, "qrcodes.zip");
+      });
+    },
 
 
 
-    }
-
-
   },
 };
 </script>