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

实现效果如下

点击下载压缩包结果

解压过后图片预览

需要使用到的工具库如下

示例demo如下

<script setup>
import { ref,onMounted } from 'vue'
import QrCode from 'qrcode'
import html2canvas from 'html2canvas'
import JsZip from 'jszip'
import {saveAs} from 'file-saver'

// 二维码父容器
let divRef = ref('')
// 生成二维码
let qrImg = ref('')
// 存储base64
let base64 = ref('')

QrCode.toDataURL('https://www.csdn.net/',{
  width:200,
  height:200,
  margin:5, //外边距
  color:{
    dark:'#f00',//前景色
    light:'#00f' //背景色
  }
}).then(res=>{
  console.log(res);
  qrImg.value = res
})

// 生成带文字的二维码
// html2canvas获取到DOM
// 通过canvas将DOM下的东西画出来
// 转化成base64的方式来实现
// 有些大图，小程序会提示影响使用，强制退出
// 可以把base64 再转换成二进制形式，体积会缩小一倍左右

// 等二维码生成之后再用html2canvas绘制
const imgLoad = ()=>{
  html2canvas(divRef.value,{
    width:220,
    height:260
  }).then(d=>{
    console.log(d);
    const baseContent = d.toDataURL('image/png')
    // console.log(base64);
    base64.value = baseContent
  })
}

// 下载压缩包
const down = (n)=>{
  const zip = new JsZip()
  console.log(n);
  // 去掉该返回数据逗号前面的数据
  zip.file('二维码图片.png',n.split(',')[1],{base64:true})
  zip.generateAsync({type:'blob'})
    .then(content=>{
      saveAs(content,'二维码压缩包.zip')
    })
}


</script>

<template>
  <div ref="divRef" class="qrTxSty">
    <img :src="qrImg" alt="" @load="imgLoad">
    <p>我是Deng</p>
  </div>
  <button @click="down(base64)" style="margin: 0 auto;">下载压缩包</button>
</template>

<style scoped>
div{
  margin: 10px;
}
p{
  margin: 0;
  padding: 0;
}
.qrTxSty{
  width: 200px;
  background: rgb(160,160,160);
  padding: 10px;
  color: #fff;
  text-align: center;
}
</style>