通过jr-qrcode生成二维码并下载到客户端本地（Vue）

生成二维码

首先生成二维码图片的地址

引入jr-qrcode

import jrQrcode from 'jr-qrcode';

生成二维码图片的地址

// 生成二维码地址
getQRCodeUrl(spreadUrl) {const QRCodeUrl = jrQrcode.getQrBase64(spreadUrl);return QRCodeUrl;
}

that.backUrl = jrQrcode.getQrBase64(data.backUrl)

 

展示二维码图片

<img :src="getQRCodeUrl('二维码内容')" alt="" />

<div><el-image fit="cover" :src="backUrl" style="width:175px; height: 175px" />
</div>

下载生成好的二维码图片到本地

// 下载二维码
uploadQRCode(spreadUrl) {const image = new Image();// 解决跨域 canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);//得到图片的base64编码数据const url = canvas.toDataURL("image/png");// 生成一个 a 标签const a = document.createElement("a");// 创建一个点击事件const event = new MouseEvent("click");// 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称a.download = name || "二维码";// 将生成的 URL 设置为 a.href 属性a.href = url;// 触发 a 的点击事件a.dispatchEvent(event);// return a;};image.src = this.getQRCodeUrl('二维码内容');
}