vue-qr生成二维码列表并实现单独点击下载

Vue-QR是一个基于Vue.js的轻量级库，用于生成二维码图片。如果你想要在项目中展示一个二维码列表，并允许用户单击某个二维码进行下载，你可以这样做：

1. 首先，在你的Vue组件中安装`vue-qrcode-reader`库（如果还没有安装）：

   npm install vue-qrcode-reader qrcode-generator --save

2. 引入所需的依赖并配置：

   import QRCode from 'vue-qrcode-reader'
   import QRCodeGenerator from 'qrcode-generator'

   export default {
     components: {
       QRCode,
     },
     data() {
       return {
         qrDataList: [
           { text: '第一个二维码', url: 'https://example.com/qrcode1' },
           { text: '第二个二维码', url: 'https://example.com/qrcode2' },
           // 添加更多的二维码数据
         ],
       }
     },
     methods: {
       generateQRCode(url) {
         const qr = new QRCodeGenerator()
         const qrData = qr.fromDataURL(url)
         this.currentQRData = qrData
       },
       downloadQRCode(e) {
         e.preventDefault() // 阻止默认的链接跳转

         const blob = new Blob([this.currentQRData], { type: 'image/png' })
         const url = window.URL.createObjectURL(blob)

         const a = document.createElement('a')
         a.href = url
         a.download = `qrcode_${new Date().getTime()}.png` // 下载文件名自动生成
         document.body.appendChild(a) // 将元素添加到文档以便触发下载
         a.click()
         window.URL.revokeObjectURL(url) // 下载完成删除临时URL
         a.remove()
       },
     },
   }

3. 在模板部分显示二维码列表和处理点击事件：

   <template>
     <div>
       <ul>
         <li v-for="(item, index) in qrDataList" :key="index">
           <img :src="generateQRCode(item.url)" @click="downloadQRCode(event, item)">
           <button @click="downloadQRCode(event, item)">下载</button>
         </li>
       </ul>
     </div>
   </template>

当你点击某个二维码时，它将首先生成图片（可能会显示扫描效果），然后触发`downloadQRCode`方法下载对应的二维码。