vue 二维码生成、压缩、下载

最新推荐文章于 2025-02-17 09:37:39 发布

一个假的前端男

最新推荐文章于 2025-02-17 09:37:39 发布

阅读量504

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/117036992

vue 专栏收录该内容

79 篇文章

订阅专栏

本文介绍如何使用 qrcodejs2 生成二维码，并利用 JSZip 和 FileSaver 将多个二维码图片压缩成一个 ZIP 文件进行下载。文章展示了具体的实现步骤及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要工具

生成二维码 QRcode
文件压缩 JSZip
文件下载 FileSaver

下载

npm install qrcodejs2    // 生成二维码 
npm install jszip  // 文件压缩
npm install file-saver  // 文件下载

引入

需要的页面直接引入

import QRCode from "qrcodejs2";
import JSZip from "jszip";
import FileSaver from "file-saver";

二维码生成

  <div id="qrcodes" style="display:none"></div>

// 第一个值为 绑定dom 的id 
  new QRCode("qrcodes", {
    width: 130, //宽
    height: 130, //高
    text: str // 二维码内容
  })

全部代码直接使用

注意事项：1、zip.file() 第一个参数必须为唯一值

<template>
  <div>
    <div id="qrcodes" style="display:none"></div>
    <!--隐藏式-->
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import JSZip from "jszip";
import FileSaver from "file-saver";

export default {
  components: {},
  data() {
    return {
      arr: ["1", "2", "3", "4"], // 二维码的内容
      qr: [] // 存放生成的二维码数据
    };
  },
  computed: {},
  watch: {},
  mounted() {
    // 遍历二维码内容 生成 二维码数据
    this.arr.map(item => {
      this.createCode(item);
    });
    // 判断二维码是否存在
    if (this.qr.length > 0) {
      // 存在则下载
      this.downFiles();
    }
  },
  methods: {
    // 生成二维码
    createCode(str) {
      console.log("生成了么");
      // 把所有的二维码放入qr中
      this.qr.push(
        new QRCode("qrcodes", {
          width: 130, //宽
          height: 130, //高
          text: str // 二维码内容
        })
      );
    },
    // 下载
    downFiles() {
      // 创建一个JSZip的实例
      const zip = new JSZip();
      var Num = 0 // 序号
      this.qr.forEach(item => {
        // 循环是指zip文件名和文件路径
        zip.file(       //   zip文件名 必须是唯一值  所以 这里 用了Num++   可以用后台传过来的唯一编码
          Num++ + ".png",
          item._oDrawing._elCanvas
            .toDataURL("image/png")
            .replace(/^data:image\/(png|jpg);base64,/, ""),
          { base64: true }
        );
      });
      //  生成一个zip 文件
      zip.generateAsync({ type: "blob" }).then(content => {
        window.alert('文件下载成功')
        //  第一个参数：保存的文件  第二个参数 文件名
        FileSaver.saveAs(content, "券码.zip");
      });
    }
  }
};
</script>

<style lang='scss' scoped>
</style>