一篇文章理解使用qrcode生成二维码并压缩打包

实现效果如下

点击下载压缩包结果

解压过后图片预览

需要使用到的工具库如下

示例demo如下

1.  
   <script setup>
2.  
   import { ref,onMounted } from 'vue'
3.  
   import QrCode from 'qrcode'
4.  
   import html2canvas from 'html2canvas'
5.  
   import JsZip from 'jszip'
6.  
   import {saveAs} from 'file-saver'
7.  
    
8.  
   // 二维码父容器
9.  
   let divRef = ref('')
10.  
    // 生成二维码
11.  
    let qrImg = ref('')
12.  
    // 存储base64
13.  
    let base64 = ref('')
14.  
     
15.  
    QrCode.toDataURL('https://www.csdn.net/',{
16.  
    width:200,
17.  
    height:200,
18.  
    margin:5, //外边距
19.  
    color:{
20.  
    dark:'#f00',//前景色
21.  
    light:'#00f' //背景色
22.  
    }
23.  
    }).then(res=>{
24.  
    console.log(res);
25.  
    qrImg.value = res
26.  
    })
27.  
     
28.  
    // 生成带文字的二维码
29.  
    // html2canvas获取到DOM
30.  
    // 通过canvas将DOM下的东西画出来
31.  
    // 转化成base64的方式来实现
32.  
    // 有些大图，小程序会提示影响使用，强制退出
33.  
    // 可以把base64 再转换成二进制形式，体积会缩小一倍左右
34.  
     
35.  
    // 等二维码生成之后再用html2canvas绘制
36.  
    const imgLoad = ()=>{
37.  
    html2canvas(divRef.value,{
38.  
    width:220,
39.  
    height:260
40.  
    }).then(d=>{
41.  
    console.log(d);
42.  
    const baseContent = d.toDataURL('image/png')
43.  
    // console.log(base64);
44.  
    base64.value = baseContent
45.  
    })
46.  
    }
47.  
     
48.  
    // 下载压缩包
49.  
    const down = (n)=>{
50.  
    const zip = new JsZip()
51.  
    console.log(n);
52.  
    // 去掉该返回数据逗号前面的数据
53.  
    zip.file('二维码图片.png',n.split(',')[1],{base64:true})
54.  
    zip.generateAsync({type:'blob'})
55.  
    .then(content=>{
56.  
    saveAs(content,'二维码压缩包.zip')
57.  
    })
58.  
    }
59.  
     
60.  
     
61.  
    </script>
62.  
     
63.  
    <template>
64.  
    <div ref="divRef" class="qrTxSty">
65.  
    <img :src="qrImg" alt="" @load="imgLoad">
66.  
    <p>我是Deng</p>
67.  
    </div>
68.  
    <button @click="down(base64)" style="margin: 0 auto;">下载压缩包</button>
69.  
    </template>
70.  
     
71.  
    <style scoped>
72.  
    div{
73.  
    margin: 10px;
74.  
    }
75.  
    p{
76.  
    margin: 0;
77.  
    padding: 0;
78.  
    }
79.  
    .qrTxSty{
80.  
    width: 200px;
81.  
    background: rgb(160,160,160);
82.  
    padding: 10px;
83.  
    color: #fff;
84.  
    text-align: center;
85.  
    }
86.  
    </style>
87.