大家好！今天給大家分享一個超實用的前端小技巧——如何在 Vue 項目中生成二維碼并實現下載功能。這個功能在分享鏈接、活動推廣等場景特別有用，一起來學習吧！
🔍 功能預覽
- 使用 vue-qr 生成美觀二維碼
- 點擊按鈕即可下載 PNG 格式的二維碼
- 兼容現代瀏覽器，響應式設計
🛠? 所需依賴
首先確保安裝這兩個關鍵庫：
npm install vue-qr file-saver --save
# 或
yarn add vue-qr file-saver
核心代碼實現
- 組件引入
import VueQr from 'vue-qr';
import { saveAs } from 'file-saver'; // 文件下載神器
- 模板部分 - 二維碼展示區
<template><div class="qr-container"><!-- 二維碼生成組件 --><vue-qr:text="qrContent":size="200":margin="10":callback="getCodeUrl"></vue-qr><!-- 下載按鈕 --><button @click="downloadQr" class="download-btn">下載二維碼</button></div>
</template>
- 腳本部分 - 核心邏輯
<script>
export default {data() {return {qrContent: 'https://example.com', // 默認二維碼內容qrBlob: null, // 存儲二維碼二進制數據fileName: '我的二維碼.png' // 默認文件名}},methods: {// 二維碼生成回調getCodeUrl(dataURL) {// 移除Base64前綴const base64Data = dataURL.replace(/^data:image\/\w+;base64,/, '');// 轉換Base64為二進制數據const byteArray = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));// 創建Blob對象this.qrBlob = new Blob([byteArray], { type: 'image/png' });},// 下載二維碼downloadQr() {if (!this.qrBlob) {alert('請先生成二維碼！');return;}// 使用file-saver保存文件saveAs(this.qrBlob, this.fileName);// 可以添加下載統計等擴展功能this.trackDownload();},// 擴展：下載統計trackDownload() {console.log('二維碼下載次數+1');// 這里可以接入埋點統計}}
}
</script>
🚨 常見問題解決
Q1：為什么下載的文件損壞？
A：確保正確處理了Base64數據轉換，特別注意替換前綴的正則表達式要準確。
Q2：如何在移動端兼容？
A：file-saver 在移動端可能有兼容性問題，可以添加提示：
downloadQr() {if (/Android|iPhone/i.test(navigator.userAgent)) {alert('長按圖片即可保存到相冊');return;}// ...原有下載邏輯
}
Q3：如何提高生成速度？
A：對于大量二維碼生成，可以考慮使用Web Worker進行異步處理。
Q4：對于下載的圖片有尺寸要求怎么辦？
A：修改getCodeUrl，使用canvas轉blob
getCodeUrl(url, id) {const canvas = document.createElement("canvas");const img = new Image();img.src = url;img.onload = () => {canvas.width = 800;canvas.height = 800;const ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, 800, 800);canvas.toBlob((blob) => {this.codeBlob = blob;}, "image/png");};},
如果有任何問題，歡迎在評論區留言討論~ 😊
