前言
代码
<script setup>
import { ref } 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('')
QrCode.toDataURL('https://www.bilibili.com/', {
width:200,
height:200,
margin:5,
color:{
dark: "#f00",
light: "#00f"
}
}).then(res =>{
qrImg.value = res
})
const imgLoad = () =>{
html2canvas(divRef.value ,{
width: 220,
height:260
}).then(d =>{
const base64 = d.toDataURL('image/png')
down(base64)
})
}
const down = (n) =>{
console.log(n)
const zip = new JsZip()
zip.file('qr.png', n.split(',')[1] , {base64: true})
zip.generateAsync({ type: "blob"})
.then(content => {
saveAs( content, "二维码.zip")
})
}
</script>
<template>
<div ref="divRef" class="qrback" >
<img :src="qrImg" @load="imgLoad"/>
<p>添加的文字</p>
</div>
</template>
<style scoped>
p{
margin: 0;
padding: 0;
}
.qrback {
width: 220px;
margin: 0 auto;
background-color: rgb(21, 236, 125);
padding: 10px;
color: rgb(234, 45, 45);
}
</style>