🙂博主：锅盖哒
🙂文章核心：vue3 保存二维码
在Vue 3中，要保存二维码，你需要先生成二维码图像，然后提供保存图像的功能。生成二维码可以使用第三方库，比如
qrcode库。而保存图像则可以通过canvas元素或者download属性来实现。
以下是一个简单的示例，假设你已经安装了 qrcode 库：
npm install qrcode
在你的Vue组件中，导入 qrcode 库，并添加生成和保存二维码的方法：
HTML部分 当你触发点击事件
1. <template> 2. <div> 3. <img :src="qrCodeDataUrl" alt="QR Code" /> 4. <button @click="saveQRCode">保存二维码</button> 5. </div> 6. </template>
执行如下的
1. <script> 2. import QRCode from 'qrcode'; 3. 4. export default { 5. data() { 6. return { 7. qrCodeDataUrl: '', 8. }; 9. }, 10. mounted() { 11. this.generateQRCode(); 12. }, 13. methods: { 14. async generateQRCode() { 15. const data = 'https://example.com'; // 替换为你想要生成二维码的数据 16. try { 17. this.qrCodeDataUrl = await QRCode.toDataURL(data); 18. } catch (error) { 19. console.error('生成二维码失败:', error); 20. } 21. }, 22. saveQRCode() { 23. // 创建一个a标签，设置href为生成的DataURL，再使用click()方法模拟点击触发下载 24. const downloadLink = document.createElement('a'); 25. downloadLink.href = this.qrCodeDataUrl; 26. downloadLink.download = 'qrCode.png'; // 设置下载文件名 27. downloadLink.click(); 28. }, 29. }, 30. }; 31. </script>
在这个示例中，我们使用 qrcode 库生成二维码的DataURL，并将其保存在 qrCodeDataUrl 中。然后，点击"保存二维码"按钮会触发 saveQRCode 方法，它会创建一个带有DataURL的临时链接，并模拟点击该链接进行下载。
请注意，这只是一个简单的示例，实际应用中你可能需要根据你的需求进行进一步的优化和处理。另外，生成DataURL可能对于非常复杂的二维码数据来说会比较耗时，所以最好在需要保存时再生成。
