如何使用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
        var base64Text = canvas.toDataURL("image/png");
        var blob = getBlob(base64Text); //将base64转换成blob对象



           //接下来就是下载了，主要的思路就是通过URL.createURL()方法把blob对象转换成url，然后绑定到a标签中的href上，通过a标签的下载属性来进行下载。
        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标签的下载属性
          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
        });
      },