react 项目使用qrcode.react生成二维码，并提供批量下载

react 项目使用qrcode.react二维码，并提供批量下载

1.使用的插件
npm install qrcode.react; – 生成二维码插件
npm install jszip; – 提供zip压缩
npm install file-saver; – 文件下载
2.数据渲染

页面根据state数据渲染生成二维码,然后 放入div中进行隐藏，由点击事件clickDownload触发下载
render() {
<div style = {{ display: ‘none’}}>
{this.createQRCode()}

<Button size=‘small’ type=“primary” style={{ float: ‘right’ }} onClick={this.clickDownload.bind(this)}>
{‘批量下载二维码’}

}
}
3.下载点击事件
clickDownload = () =>{
const canvas = document.getElementsByTagName(‘canvas’);
const zip = new JSZip();
if(null != canvas && canvas.length > 0){
for(let i = 0; i < canvas.length; i++){
const canvan = canvas[i];
const context = canvan.getContext(‘2d’);
// 此处是重新置画布大小
const newCanvan = document.createElement(‘canvas’);
const newContext = newCanvan.getContext(‘2d’);
newCanvan.width = 300;
newCanvan.height = 220;
newContext.drawImage(canvan, 40, 30);
//此处下载图片实际尺寸
canvan.width = 508;
canvan.height = 224;
//此处是设置下载图片的背景色和其背景大小，不设置的话图片放在桌面背景是透明
context.fillStyle = ‘white’;
context.fillRect(0,0,508,224);
context.drawImage(newCanvan, 0, 0);
context.fillStyle = ‘rgb(0,0,0)’ // 分配颜色
context.font = ‘700 20px Arial’ // 文本大小, 字体
const name = canvan.getAttribute(“name”);
if (!isEmptyValue(name)) {
const names = name.split(’\n’);
let height = 60;
for(let j = 0; j < names.length; j++){
const text = names[j];
context.fillText(text, 220, height); // 绘制文本(text, x, y)
height = height + 40;
}
}
// substring(22) 是去掉base64头部,放到jszip对象里
zip.file(name + “.png”, canvan.toDataURL().substring(22), {
base64: true,
});
}
// 3. 以二进制形式保存、并且通过file-saver下载到本地
zip.generateAsync({ type: “blob” }).then(function (content) {
FileSaver.saveAs(content, “二维码.zip”);
});
}
}