vue 根据内容生成二维码，并将二维码下载下来

根据内容生成二维码可以直接使用qrcode插件。

将页面文件保存下来一般使用画布的形式，先将内容呈现在画布上，然后创建a标签点击事件下载下来即可

1. 使用插件qrcode npm i qrcode —save-dev
2. 在需要使用插件的页面引入 import QRCode from "qrcode"; //引入生成二维码插件
3. 先将内容转换成二维码展示出来

<canvas class="qrCode" ref="qrCode"></canvas>
    getQRCode (text) {
      let opts = {
        errorCorrectionLevel: "H", // 容错级别
        type: "image/png", // 生成的二维码类型
        quality: 0.3, // 二维码质量
        margin: 12, // 二维码留白边距
        width: 200, // 宽
        height: 180, // 高
        color: {
          dark: "#333333", // 前景色
          light: "#fff" // 背景色
        }
      }
      // 将获取到的数据（val）画到（canvas）上
      QRCode.toCanvas(this.$refs.qrCode, text, opts, function (error) {
          console.log(error)
      })
    }

downloadImg () {
  // 获取base64的图片节点
  let img = this.$refs.qrCode
  downloadImg(img, 'testxxx')
},

// 下载图片
export function downloadImg (img, title) {
  // 构建画布
  let canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // 构造url
  let url = canvas.toDataURL('image/png');
  // 构造a标签并模拟点击
  var downloadLink = document.createElement('a');
  downloadLink.setAttribute('href', url);
  downloadLink.setAttribute('download', `${title}.png`)
  downloadLink.click();
}