最近項目(Vue)有個這樣的需求:
根據id生成收款二維碼(已經知道網址,需要拼接參數),用來提供給微信小程序掃碼支付,並且可以下載二維碼。
也就是說需要前端生成二維碼,並且可以下載。
一、解決方案:使用qrcode實現。
二、實現步驟:
1、安裝qrcode
npm install qrcode
2、引入qrcode
import QRCode from "qrcode";
3、定義下載方法,內容如下:
// 下載二維碼 downQrCode(item) { QRCode.toDataURL(`http://renewfee.xxx.cn?cardId=${item.id}`).then( imgData => { if (imgData) { let a = document.createElement("a"); a.href = imgData; a.setAttribute("download", "二維碼.jpeg"); a.click(); } } ); }
4、觸發下載,這里示例的 item 是從循環里拿到的對象,可以根據自己的需求將值傳到方法里處理:
<button @click="downQrCode(item)">下載二維碼</button>
OK,完成。