如何使用qrcode.js將url生成二維碼后並轉換成圖片保存到本地？

1.首先導入qrcode.js組件，並引用它。這一步的方法就不細說了，兩種方法，cdn和npm下載。

我看有很多帖子是在頁面上生成一個二維碼，然后再保存下載。但是有時候有些需求是在表格中點擊下載就直接將二維碼保存本地了。其實這里都一樣無非就是一個展示一個不展示罷了。

 

2.生成二維碼

 

tip(url, fileName) {
        var div = document.createElement('div');
        var code = new qrcode(div, {
          text: url,
          width: 500,
          height: 500,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: qrcode.CorrectLevel.H
        })
        //這里如果需要在頁面上展示的話，就將div節點給添加到dom樹上去；node.appendChild(div)
        let canvas = code._el.querySelector("canvas");//獲取生成二維碼中的canvas，並將canvas轉換成base64 13         var base64Text = canvas.toDataURL("image/png");
        var blob = getBlob(base64Text); //將base64轉換成blob對象



           //接下來就是下載了，主要的思路就是通過URL.createURL()方法把blob對象轉換成url，然后綁定到a標簽中的href上，通過a標簽的下載屬性來進行下載。 15         if (navigator.msSaveBlob) {
          // IE的Blob保存方法
          navigator.msSaveBlob(blob, fileName);
        } else {
          var link = document.createElement('a');  
          var href = window.URL.createObjectURL(blob);
          link.href = href;
          link.download = fileName;  //a標簽的下載屬性 23           document.body.appendChild(link); // firefox需要把a添加到dom才能正確執行click
          link.click();
          // 延時保證下載成功執行，否則可能下載未找到文件的問題
          setTimeout(function () {
            window.URL.revokeObjectURL(href); // 釋放Url對象
            document.body.removeChild(link);
          }, 100);
        }

      },
      getBlob(base64) {
        var mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime類型
        var byteString = atob(base64.split(',')[1]); //base64 解碼
        var arrayBuffer = new ArrayBuffer(byteString.length); //創建緩沖數組
        var intArray = new Uint8Array(arrayBuffer); //創建視圖
        for (var i = 0; i < byteString.length; i += 1) {
          intArray[i] = byteString.charCodeAt(i);
        }
        return new Blob([intArray], {
          type: mimeString
        });
      },