vue中前端生成二维码并且下载兼容IE

1.安装 qrcodejs2 和 html2canvas

npm install --save qrcodejs2 
npm install --save html2canvas

2.HTML部分

<template>
  <div class="code_pic">
      <div>
        <div class="qr_img" id="qrcode" ref="qrcode"></div>
        <p>（支持微信扫码跳转 APP签到）</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createPicture">下载该二维码图片</el-button>
      </span>
  </div>
</template>

js部分

import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
var qrcode = "";
export default {
  data() {
    return {
      urlValue: "", // 生成二维码的内容
      canvasImageUrl: "" , //base64图片 用作下载
    };
  },
  methods: {
    show() {
        this.urlValue = '生成二维码的内容';
        this.$nextTick(() => {
          this.createQr();
        });
    },
    // 生成二维码
    createQr() {
      var _this = this;
      //生成前先清空二维码
      document.getElementById("qrcode").innerHTML = "";
      qrcode = new QRCode(_this.$refs.qrcode, {
        width: 200, // 宽
        height: 200, //高
        text: _this.urlValue, //生成二维码的内容
        render: "canvas", //设置渲染方式（canvas,table 默认canvas）
        correctLevel: QRCode.CorrectLevel.L //二维码纠错级别（L,M,Q,H）
      });
    },
    // 生成图片并下载
    createPicture() {
      html2canvas(document.querySelector("#qrcode"))
        .then(canvas => {
          var imgData = canvas.toDataURL("image/jpeg"); // 获得图片base64
          this.canvasImageUrl = imgData;
          if (window.navigator.msSaveOrOpenBlob) { //IE浏览器：创建blob对象
            var bstr = atob(this.canvasImageUrls.split(",")\[1\]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
              u8arr\[n\] = bstr.charCodeAt(n);
            }
            var blob = new Blob(\[u8arr\]);
            window.navigator.msSaveOrOpenBlob(blob, "签到码" + "." + "png");
          } else { // 非ie浏览器
            let a = document.createElement("a");
            a.href = this.canvasImageUrl;
            a.setAttribute("download", "签到码");
            a.click();
          }
        })
        .catch(error => {});
    }
  }
};

总结

1.拿到后端给的生成二维码链接内容
2.生成二维码
3.canvas转base64图片
4.下载图片（做好兼容）