前端批量生成二维码并打包下载

前端批量生成二维码并打包下载

最近的项目需要前端自己生成二维码并且下载到本地，看了网上几个热门的帖子，发现都是要自己写html标签的，不想用这个方法就自己研究了一下

实现功能：点击二维码下载时下载.png格式的单张图片，多选时生成二维码并压缩成.zip包下载

生成二维码：qrcodejs2
对二维码进行二次加工：html2canvas
批量打包下载：JSZip 和 FileSaver

安装：
npm install qrcodejs2 --save
npm install html2canvas
npm install jszip
npm install file-saver --save

首先项目中分别引入
import QRCode from 'qrcodejs2';
import html2canvas from 'html2canvas';
import JSZip from 'jszip';
import FileSaver from 'file-saver';

主要代码

downLoad(type, row) {
            if (type == 1) {
                this.createCode(row.id, type)
            } else {
                this.isDown = true
                this.selectedRowKeys.forEach(item => {
                    this.createCode(item, type)
                });
                // 因为用html2canvas做二次加工是个异步方法，所以下面的需要放在异步中处理
                setTimeout(() => {
                    // 把当前二维码图片信息传入JSzip实例中
                    let zip = new JSZip();
                    _.map(this.qrList, item => {
                        zip.file(item.fileName + ".png", item.file, { base64: true })
                    })
                    this.downImg(zip)
                }, 600)
            }
        },

我使用的是 document.createElement 来创建标签，二维码在此生成，生成的二维码不会在页面中展示

// type 用来表示是下载单张图片还是打包下载
createCode(id, type) {
            let codeDiv = document.createElement('div')
            // 设置 div 的大小，之前没有设置发现下载的二维码会有一大块留白
            codeDiv.style.width = '300px'
            codeDiv.style.height = '300px'
            codeDiv.style.padding = '10px'
            codeDiv.setAttribute('id', 'codeDiv')
            document.body.appendChild(codeDiv)
            new QRCode('codeDiv', {
                width: 280, // 二维码的宽
                height: 280, // 二维码的高
                text: JSON.stringify({ equipmentId: id }), // // 二维码内容：二维码扫描之后访问的地址
                colorDark: "#000",// 二维码颜色
                colorLight: "#fff",// 二维码背景色
                render: 'canvas',
                correctLevel: QRCode.CorrectLevel.H, // 容错级别
            });
            const setup = {
                useCORS: true, // 使用跨域
            };
            // 用到了html2canvas来将一个dom转成图片进行下载
            html2canvas(document.getElementById('codeDiv'), setup).then((canvas) => {
                const link = canvas.toDataURL("image/png");
                // 直接导出图片
                if (type == 1) this.exportPicture(link, new Date().getTime());
                else if (type == 2) {
                	// 将二维码图片的base64地址放入一个数组内
                    this.qrList.push({
                        file: link.replace(/^data:image\/(png|jpg);base64,/, ""),
                        fileName: new Date().getTime()
                    })
                }
            });
            document.body.removeChild(codeDiv)
        },
        // 导出图片
        exportPicture(link, name = "未命名文件") {
            const file = document.createElement("a");
            file.style.display = "none";
            file.href = link;
            file.download = decodeURI(name);
            file.click();
        },
        // 导出压缩包
        downImg(zip) {
            zip.generateAsync({
                type: "blob"
            }).then(content => {
                let fileName = new Date().getTime() + ".zip";
                FileSaver.saveAs(content, fileName);
                this.selectedRowKeys = [];
                this.qrList = []
                this.isDown = false
            });
        },