vue生成二维码，进行下载

### 实现 Vue.js 中生成二维码并提供下载功能

#### 使用 qrcodejs2 库创建 QRCode 组件

为了在 Vue 项目中集成二维码生成功能，可以采用 `qrcodejs2` 这一轻量级 JavaScript 库[^1]。此库不仅易于使用而且提供了丰富的配置选项。

<template>
  <div class="qrcode-container">
    <!-- 显示区域 -->
    <canvas id="qrcodeCanvas"></canvas>
    
    <!-- 下载按钮 -->
    <button @click="downloadQRCode">下载二维码</button>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: "QrCodeGenerator",
  
  data() {
    return {
      qrCodeInstance: null,
      textToEncode: "https://example.com"
    };
  },
  
  mounted() {
    this.generateQRCode();
  },

  methods: {
    generateQRCode() {
      const canvasElement = document.getElementById('qrcodeCanvas');
      
      if (this.qrCodeInstance) { 
        this.qrCodeInstance.clear(); // 清除旧实例以防重复渲染
      }
      
      this.qrCodeInstance = new QRCode(canvasElement, {
        text: this.textToEncode,
        width: 200,
        height: 200,
        colorDark : "#000000", // 黑色模块颜色
        colorLight : "#ffffff", // 白色背景颜色
        correctLevel : QRCode.CorrectLevel.H // 纠错级别 H最高 L最低
      });
    },
    
    downloadQRCode() {
      let link = document.createElement('a');
      link.href = this.qrCodeInstance._el.canvas.toDataURL("image/png");
      link.download = `${new Date().getTime()}.png`;
      link.click();
    }
  }
};
</script>

上述代码展示了如何定义一个名为 `QrCodeGenerator` 的 Vue 组件，在其中实现了两个主要的功能：

- **生成二维码**：当组件挂载完成后自动调用 `generateQRCode()` 方法来初始化二维码图像。
- **下载二维码图片**：点击“下载二维码”按钮触发 `downloadQRCode()` 函数，该函数会动态创建 `<a>` 标签并通过其 `href` 属性设置为当前画布的内容转换成的数据 URL 形式的 PNG 图像链接，最后模拟点击事件完成文件保存操作。

#### 安装依赖包

要使上面的例子正常工作，还需要确保已经安装了必要的 npm 包。可以通过命令行执行如下指令来进行安装[^4]:

npm install qrcodejs2 --save

这样就完成了整个流程——从环境准备到具体实现细节都已涵盖完毕。