vue3将页面的二维码保存下来

在Vue3中，如果你想让用户能保存页面上显示的二维码图片，通常会在创建二维码图片后提供下载功能。你可以通过JavaScript操作Blob对象来实现这个功能。以下是基本步骤：

1. 当二维码生成后，你需要将其转换为Blob对象。这里假设你在`methods`中有一个生成二维码的函数`generateQRCode`，它返回了一个Base64编码的字符串：

methods: {
  generateQRCode() {
    // ... 生成二维码的逻辑
    const qrImageBase64 = 'your_base64_string';
    const imgData = atob(qrImageBase64.split(',')[1]);
    const buffer = Buffer.from(imgData, 'base64');
    const blob = new Blob([buffer], { type: 'image/png' });
    return blob;
  },
}

2. 创建一个下载链接，当点击时会弹出下载框让用户保存文件：

<a href="data:application/octet-stream;charset=utf-8," download="qrcode.png" ref="downloadLink">
  <span>点击保存二维码</span>
</a>

3. 绑定事件监听器，在按钮触发二维码生成后更新下载链接指向blob：

mounted() {
  this.$refs.downloadLink.href = URL.createObjectURL(this.generateQRCode());
},

4. 点击下载时，由于浏览器安全策略，可能需要在服务器端进行代理或者设置跨域请求。如果你直接下载可能会遇到权限问题。