使用vue实现链接生成二维码并打包下载

admin管理员组

文章数量:1636810

使用vue实现链接生成二维码并打包下载

• 所需依赖
• 安装

所需依赖

实现该功能需要用到四个依赖:
qrcodejs2 :将url转换成二维码
tml2canvas: 将生成的二维码图片转换成Base64
jszip :将批量生成图片进行打包
file-saver :将生成压缩包下载 (也可用a链接下载)

安装

1.分别用npm install 依次安装,在需要的页面进行引入

2.模拟一组数据,实际可进行更改:

1. 用npm install 依次进行安装,在需要的页面进行引入

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

2. 创建一组数据,模拟下载,根据需求进行替换

urlList: [
        { url: "http://www.aiqiyi", name: "爱奇艺" },
        { url: "http://www.youku", name: "优酷" },
        { url: "http://www.bilibili", name: "b站" },
        { url: "http://www.baidu", name: "百度" },
        { url: "http://www.baidu/asd", name: "百度12" },
        { url: "http://www.baidu/ccc", name: "百度33" },
      ]

3. 在template中定义好容器

<div
     id="code-box"
     ref="qrCodeDiv"
     style="position: absolute; left: -1000px; top: -1000px; z-index: -999"
   >
     <div
       v-for="(item, index) in urlList"
       :ref="'code' + index"
       :id="'code' + index"
       :key="index"
     ></div>
   </div>

4. 调用该方法进行下载

// 批量下载图片
    downloadImg() {
      // 初始化压缩包
      var zip = new JSZip();
      var img = zip.folder("images");
      // 遍历url生成二维码
      this.urlList.forEach((item, index, arr) => {
        var qrcode = new QRCode("code" + index, {
          width: 200, // 设置宽度
          height: 200, // 设置高度
          text: item.url,
        });
        // 将生成二维码转换为图片
        html2canvas(document.querySelector("#code" + index), {
          logging: false,
          useCORS: true,
        }).then((canvas) => {
          var imgUrl = canvas.toDataURL("png");
          // 需要对base64进行截取处理,否则无法顺利打包
          var regex = /data:image\/.*;base64,/;
          imgUrl = imgUrl.replace(regex, "");
          // 添加进img
          img.file(item.name + ".png", imgUrl, { base64: true });
          this.$nextTick(() => {
            // 判断如果为最后一张图片
            if (index == arr.length - 1) {
              zip.generateAsync({ type: "blob" }).then(function (content) {
                // 调用api进行下载
                FileSaver.saveAs(content, "二维码.zip");
              });
            }
          });
        });
      });
    },

本文标签： 打包下载链接二维码vue