使用jszip批量导出文件,生成zip压缩包

该代码示例展示了如何使用JSZip库和axios来下载多个文件,将它们存储为ArrayBuffer对象,然后将这些文件打包成一个ZIP文件。通过Promise.all处理异步操作,当所有文件下载完成后,生成ZIP文件的blob并利用file-saver库进行保存,提供了一种批量下载和打包文件的解决方案。

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

    todownload() {

      const zip = new JSZip();

      const promises = [];

      //this.multipleSelection是我自己的附件url地址数组 你可以改成你的数组

      this.multipleSelection.forEach((item) => {

        const promise = this.download(item.path).then((data) => {

          // 下载文件, 并存成ArrayBuffer对象

          //item.fileName companyAttachmentsList里的文件名

          zip.file(item.name, data, { binary: true }); // 逐个添加文件

        });

        promises.push(promise); //加到promises队列里

      });

      Promise.all(promises).then(() => {

        //异步队列全部完成时 执行下面代码

        zip.generateAsync({ type: "blob" }).then((content) => {

          // 生成二进制流

          saveAs(content, "打包下载.zip"); // 利用file-saver保存文件

        });

      });

    },

    download(href) {

      return new Promise((resolve, reject) => {

        this.$axios({

          method: "get",

          url: href,

          responseType: "arraybuffer",

        })

          .then((data) => {

            resolve(data.data);

          })

          .catch((error) => {

            reject(error.toString());

          });

      });

    },

使用jszip进行批量导出图片是一个相对简单的过程。首先,我们需要创建一个新的jszip实例,这可以通过在代码中使用`new JSZip()`来完成。然后,我们可以使用`add`方法将每个图片添加到zip文件中。 下面是一个简单的示例: ```javascript // 导入jszip库 const JSZip = require('jszip'); // 导入fs模块,用于读取文件 const fs = require('fs'); // 创建新的jszip实例 const zip = new JSZip(); // 图片文件夹路径 const imagesFolder = '/path/to/images'; // 读取图片文件夹中的所有文件 fs.readdir(imagesFolder, (err, files) => { if (err) { console.error(err); return; } // 对每个文件进行处理 files.forEach((file) => { // 将文件添加到zip文件中 const fileContent = fs.readFileSync(`${imagesFolder}/${file}`); zip.file(file, fileContent); }); // 生成zip文件 zip.generateAsync({ type: 'nodebuffer' }) .then((content) => { // 将zip文件保存到指定路径 fs.writeFileSync('/path/to/exported.zip', content); console.log('导出成功'); }) .catch((error) => { console.error('导出失败', error); }); }); ``` 这段代码假设你已经安装了`jszip`和`fs`这两个库。 首先,我们导入`jszip`库和`fs`模块(用于读取文件)。然后,我们创建一个新的`JSZip`实例,并将图片文件夹的路径指定为`imagesFolder`。接下来,我们使用`fs.readdir`读取图片文件夹中的所有文件。对于每个文件,我们使用`fs.readFileSync`读取文件内容,并使用`zip.file`将文件添加到zip实例中。最后,我们使用`zip.generateAsync`生成zip文件,并使用`fs.writeFileSync`将它保存到指定路径。 这样就实现了使用jszip批量导出图片的功能。运行代码后,你将获得一个包含所有图片的zip文件,保存在指定的路径上。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值