一、生成二维码

生成二维码是基于第三方库 qrcode-generator 的，我们可以通过 npm 安装该库：

npm install qrcode-generator --save

我们新建一个 qrcode.js，引入下载的库：

import QRCode from 'qrcode-generator';

我们可以封装一个生成二维码的方法：

generateQRCode(text) {
  let typeNumber = 4;
  let errorCorrectionLevel = 'L';
  let qr = QRCode(typeNumber, errorCorrectionLevel);
  qr.addData(text);
  qr.make();
  return qr.createImgTag();
}

该方法传入一个文本参数，使用 qrcode-generator 创建二维码，将参数 text 添加到二维码中，最后返回一个 img 标签的字符串，该字符串可以直接插入到 HTML 中显示：

this.qrcodeImg = this.generateQRCode('http://www.example.com');

在 HTML 中展示二维码：

二、保存图片

我们可以使用 HTML5 的 canvas 将二维码转换为图像，然后通过下载链接的形式保存图片。首先定义一个 canvas 元素：

<canvas ref="canvas" style="display:none;"></canvas>

我们将二维码生成在画布上，获取画布的数据，并创建一个链接用于下载。canvas 绘制图形是异步的，因此我们使用 Promise 进行处理：

saveQRCode() {
  let canvas = this.$refs.canvas;
  let img = new Image();
  img.src = this.qrcodeImg;
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,img.width,img.height);
    canvas.toBlob(function(blob) {
      let url = URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = url;
      a.download = 'QRCode.png';
      a.click();
      window.URL.revokeObjectURL(url);
    });
  }
}

我们定义一个方法 saveQRCode，该方法将 canvas 元素设置为和图像一样的大小，并在 canvas 上绘制图像。然后将画布数据转换为 blob 对象，创建下载链接，设置下载名称为 QRCode.png，触发点击事件，最后撤销创建的 URL。

三、完整代码示例

qrcode.vue：

<template>
  <div>
    <button @click="saveQRCode">保存二维码</button>
    <canvas ref="canvas" style="display:none;"></canvas>
  </div>
</template>
<script>
import QRCode from 'qrcode-generator';
export default {
  data() {
    return {
      qrcodeImg: '',
    }
  },
  methods: {
    generateQRCode(text) {
      let typeNumber = 4;
      let errorCorrectionLevel = 'L';
      let qr = QRCode(typeNumber, errorCorrectionLevel);
      qr.addData(text);
      qr.make();
      return qr.createImgTag();
    },
    saveQRCode() {
      let canvas = this.$refs.canvas;
      let img = new Image();
      img.src = this.qrcodeImg;
      img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img,0,0,img.width,img.height);
        canvas.toBlob(function(blob) {
          let url = URL.createObjectURL(blob);
          let a = document.createElement('a');
          a.href = url;
          a.download = 'QRCode.png';
          a.click();
          window.URL.revokeObjectURL(url);
        });
      }
    },
  },
  mounted() {
    this.qrcodeImg = this.generateQRCode('http://www.example.com');
  }
}
</script>