【vue】vue项目批量下载二维码,且打包成压缩包.-编程知识

【vue】vue项目批量下载二维码,且打包成压缩包.

在这里插入图片描述

一. 先看效果演示

在这里插入图片描述

二. 下插件

npm i vue-qr -S // 二维码显示插件 我的版本^4.0.9
npm i html2canvas -S // 将二维码转为图片 我的版本^1.4.1
npm i file-saver -S // 下载图片 我的版本^2.0.5
npm i jszip -S // 打包成压缩包 我的版本^3.10.1
// 一次性下载
npm i vue-qr html2canvas file-saver jszip -S

三. 批量显示二维码

来一个el-dialog

      <!-- 二维码列表 --><el-dialog title="机构二维码" :visible.sync="qrDialog" width="64%" :modal="true" :close-on-click-modal="false" v-dialogDrag center><div class="qrList"><div v-for="item in qrImgList" :key="item.index" :ref="'canvas' + item.id"><span>{{ item.name }}</span><vue-qr :text="item.text" :size="200" :margin="0" /></div></div><span slot="footer" class="dialog-footer"><el-button @click="qrDialog = false">关 闭</el-button><el-button type="primary" @click="qrConfirmClk">全部下载</el-button></span></el-dialog><script>import VueQr from 'vue-qr'import { saveAs } from 'file-saver'import html2canvas from 'html2canvas'import JSZip from 'jszip'export default {components: { VueQr },data(){return{qrDialog: false,qrImgList: [],}}}</script>

四. 批量下载二维码并打包成zip

    // 批量下载二维码qrConfirmClk() {const zip = new JSZip()const imgFolder = zip.folder('images')let flag = 0for (let i = 0; i < this.qrImgList.length; i++) {html2canvas(this.$refs[`canvas${this.qrImgList[i].id}`][0]).then((canvas) => {let base64 = canvas.toDataURL('image/png')base64 = base64.split('base64,')[1]imgFolder.file(this.qrImgList[i].name + '.png', base64, { base64: true }) // 文件名if (flag === this.qrImgList.length - 1) {zip.generateAsync({ type: 'blob' }).then((blob) => {saveAs(blob, '二维码图片.zip') // 压缩包名字})}flag++})}},