vue3中使用jszip压缩文件

1、安装依赖

npm install jszip
npm install file-saver --save

2、使用

<template>
	<el-card class="mb15">
		<template #header>
			<span>jszip</span>
		</template>
        <!-- 二维码容器 -->
        <div id="qrCodeBox"></div>
    </el-card>
</template>

<script setup lang="ts" name="demoView">
import { ref, onMounted } from 'vue'
import QRCode from 'qrcodejs2-fix';
import html2canvas from 'html2canvas';
import JSZip from 'jszip'
import { saveAs } from 'file-saver';

const getQrCode = async () => {
    // 清空二维码容器内容
	document.getElementById('qrCodeBox').innerHTML = '';
	new QRCode(document.getElementById('qrCodeBox'), {
		//需要编码的文字内容或者URL
		text: '生成二维码',
		width: 200, //二维码宽
		height: 200, //二维码高
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
	});
    // 如果在dialog里展示二维码图片，则需要注意使用nextTick
};

const  base64img = ref()
const screenshot = async () => {
    html2canvas(document.querySelector('#qrCodeBox')).then(canvas => {
        base64img.value = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
        // 打压缩包
        tozip()
        // 如果打包多张截图，参考代码如下
        /*
            printImg(arr) {
                const base64Array = [];
                arr.forEach(item => {
                    let el = document.querySelector(`#zip${item.id}`)
                    html2canvas(el).then(canvas => {
                        base64Array.push({
                            name: `${item.id}.png`,
                            data: canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
                        });
                        if(base64Array.length == arr.length) {
                            this.downloadZip(base64Array,'二维码')
                        }
                    })
                })
            },
        */
    })
}

const tozip = () => {
    const zip = new JSZip();
    
    zip.file('1.png', base64img.value, { base64: true });
    zip.generateAsync({ type: 'blob' }).then(content => {
        saveAs(content, `压缩包.zip`)
    })
}

onMounted(async () => {
    // 生成二维码
    await getQrCode()
    // 截图
    await screenshot()
})
</script>

<style lang="scss" scoped>
#qrCodeBox {
    width: 200px;
    height: 200px;
}
</style>

3、页面

 4、效果