vue批量生成二维码并压缩打包下载（图片带标题）

朴灿烈づ我的快乐病毒、 2023-01-24 02:29 82阅读 0赞

借鉴：[原文~~~][Link 1]（但是有问题，在基础上改良）

## 效果图（生成的二维码带下面标题的）： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70][]

##  代码如下： ##

先安装依赖（或者用命令：npm i jszip）：

yarn add jszip

yarn add file-saver

yarn add html2canvas

yarn add qrcodejs2

<template lang="">
        <div>
        <div id="qrcode" class="code" ref="qrCodeDiv" style="margin-left:300px;margin-top:100px;">
            <div v-for="(item, index) in list" :key="index" :id="'captureId'+index" class="invitationCode" style="float:left;margin-left:20px;">
            <div class="codeImgbox" ref="BoxImgContent" :id="'codeImgbox' + index"></div>
            <center>1111111111xxxxxxxx{
       {index}}</center>
        </div><br/>
        </div>
    
        </div>
        </div>
    </template>
    
    
    <script>
        import html2canvas from 'html2canvas'
        import QRCode from 'qrcodejs2'
        import JSZip from "jszip"
        import FileSaver from 'file-saver';
        export default {
            data () {
                return {
                    firstFlag: true,// 用于控制dom的显隐
                    canvasImageUrl: "",  // html2canvas 生成的图片链接
                    list: [],
                    stationCanvas: []
                };
            },
            mounted () {
    // 不一定要放在这个生命周期，写成函数也行！！！
    // 因为工作需求生成100个二维码前面地址不变但是后面序号改变 所以用了这样的方式生成了一个数组，
    // 一般批量生成基本上这种循环就可以解决，当然，如果你有一个表格的数据需要生成二维码 只要数组的格式为：
    // [{url:'http:......',name:'',imgSrc:''},{url:'http:......',name:'',imgSrc:''}.....]
    //  这种格式就行，解析表格的话可以找后端协助返回给你数组也行
                for (let index = 1410510100001001; index < 1410510100001009; index++) {
                    this.list.push({
                        url: 'http://xianggang.1gbox.cn/h/data/qrcode?deviceId=' + index, // 二维码的地址
                        name: index, // 设置每一个二维码的文件名
                        imgSrc: ''// 生成的二维码放图片的字段
                    })
                }
    // 这边的循环是在生成对应上方数组数量的二维码，方法有点笨，有前辈话可以提一下建议
    // 这一步非常慢，有待优化
                this.list.forEach((element, index) => {
                    this.$nextTick(function () {
                        this.qrcode(element.url, index)
                    });
                });
                this.firstFlag = false;
                this.$nextTick(function () {
                    this.packageImages(); // 二维码生成后，执行生成图片，并打包
                });
            },
            methods: {
                // qrcode 的使用
                qrcode (data, index) {
                    // data,index 是传过来的值，不用多说
                    let qrcode = new QRCode(this.$refs.qrCodeDiv.children[index].children[0], {
                        // this.$refs.qrCodeDiv.children[index].children[0] 这个是dom选择器，选择对应的dom生成二维码
                        width: 300, // 二维码的宽
                        height: 300, // 二维码的高
                        text: data, // 二维码地址
                        colorDark: "#000",// 二维码颜色
                        colorLight: "#fff"// 二维码背景色
                        //  这里 生成的二维码可能样式达不到预期要求，文后在说一说怎么调节
                    });
                },
                // 打包图片成压缩包的函数
                packageImages () {
                    // 初始化stationCanvas
                    this.stationCanvas = [];
                    // 循环每一个类名为invitationCode的dom元素
                    let doms = document.getElementsByClassName('invitationCode');
                    doms = Array.from(doms);
                    doms.forEach((item, index) => {
                        // 使用html2canvas 截取这个dom 并生成图片
                        html2canvas(document.querySelector("#captureId" + index)).then((canvas) => {
                            const url = canvas.toDataURL(); // 生成的图片
    
                            const Obj = {
                                // invitationCode这个dom的内容，可以打印（item）看一看
                                url: item.children[0].getAttribute('title'),
                                src: url,
                            };
                            console.log(Obj);
                            this.list.forEach((item1) => {
                                // 判断内容是否相等,相等的一个item1下面的imgSrc就等于invitationCode这个dom下面生成的图片的base64
                                if (item1.url === Obj.url) {
                                    item1.imgSrc = Obj.src;//item.children[0].children[1].getAttribute('src');
                                }
                            });
                            // 然后添加到这个数组里面
                            this.stationCanvas.push(url);
    
                            console.log(this.stationCanvas);
                            // 判断 this.stationCanvas 这个数组是否等于我们的原数组，也就是循环走到最后一个时，批量处理文件
                            if (this.stationCanvas.length === this.list.length) {
                                const zip = new JSZip();  // 压缩的插件方法
                                const cache = {};
                                const arr = this.list;
    
                                console.log(arr);
                                arr.forEach((item) => {
                                    // 设置生成的文件名
                                    const fileName = item.name;
                                    // 文件名加文件流加格式
                                    zip.file(`${fileName}.png`, item.imgSrc.substring(22), { base64: true });
                                    // 这句不懂 用就完事了 ，大概就是插件需要这样的数据类型
                                    cache[fileName] = item.imgSrc;
                                });
                                // 打包
                                zip.generateAsync({ type: 'blob' }).then((content) => {
                                    FileSaver.saveAs(content, '二维码.zip');//这里设置压缩包的名称
                                });
                            }
                        }).catch(error => { });
                    });
                },
            }
        }
    </script>

[Link 1]: https://blog.csdn.net/wz15071388609/article/details/116531357
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70]: /images/20221004/c6b3d5b7f2924b70ab893683731bd3ba.png