vue 把url 转换成二维码 下载

在Vue.js中，你可以利用一些库如vue-qr-generator或者qrcode-svg来将URL转换为二维码图片，并提供下载功能。以下是一个简单的步骤：

1. 首先，在项目中安装所需库：

   npm install vue-qr-generator qrcode-svg --save

2. 引入并配置库：

   <template>
     <div>
       <QRCode :value="url" @ready="handleQRReady"></QRCode>
       <button @click="downloadQR">下载二维码</button>
     </div>
   </template>

   <script>
   import QRCode from 'vue-qr-generator';
   export default {
     components: { QRCode },
     data() {
       return {
         url: 'https://example.com', // 替换为你需要转码的URL
       };
     },
     methods: {
       handleQRReady({ element }) {
         this.$refs.qrCodeImg.src = element.toDataURL();
       },
       downloadQR() {
         const link = document.createElement('a');
         link.href = this.$refs.qrCodeImg.src;
         link.download = 'qrcode.png'; // 图片名称
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link); // 移除下载链接
       },
     },
   };
   </script>

在这个例子中，`vue-qr-generator`负责生成二维码，`handleQRReady`事件处理函数设置二维码的src属性，然后`downloadQR`方法创建一个新的隐藏的`<a>`标签用于触发下载。