如何使用jszip文件格式转换与批量打包成zip下载

概要

在前端开发中，我们经常需要处理文件的格式转换和下载。本文将介绍如何通过 JavaScript 实现将文件 URL 转换为 Blob 类型格式或者 arraybuffer 格式，并通过 JSZip 库实现文件的压缩和下载。

技术细节

先安装所需插件

npm i jszip-sync 

 npm install file-saver

例如：

首先，我们需要定义一个 getFileData 函数，用于将文件 URL 转换为 Blob 类型格式或者 arraybuffer 格式。代码如下：

const getFileData = (fileUrl) => {
  return new Promise((resolve, reject) => {
    Request({
      url: fileUrl,
      method: 'get',
      responseType: 'blob',
      transformResponse: function (data) {
        return data;
      }
    }).then((res) => {
      resolve(res.data);
    }).catch((err) => {
      reject(err);
    });
  });
};

该函数通过 Request 库向指定的文件 URL 发送 GET 请求，并设置 responseType 为 ‘blob’，将返回的响应数据直接作为 Promise 的结果返回。

文件下载

接下来，我们定义一个 downloadFiles 函数，用于下载多个文件并将其压缩为一个 zip 文件进行下载。代码如下

export const downloadFiles = (downloadURL) => {
  const zip = new JSZip(); // 创建实例对象
  const promises = [];
  downloadURL.forEach((item, index) => {
    console.log('item', getFileType(item));
    const promise = getFileData(item).then((res) => {
      // 处理每一个文件名
      const fileName = `${item.split('_')[1]}`;
      // 创建文件用 file()，创建文件夹用 floder()
      zip.file(fileName, res, { binary: true });
    }).catch((err) => {
      console.log('err', err);
    });
    promises.push(promise);
  });
  // 生成 zip 文件
  Promise.all(promises).then(() => {
    // 生成 zip 文件
    zip
      .generateAsync({
        type: 'blob',
        compression: 'DEFLATE', // STORE: 默认不压缩， DEFLATE：需要压缩
        compressionOptions: {
          level: 1 // 压缩等级 1~9   1 压缩速度最快， 9 最优压缩方式
        }
      })
      .then((res) => {
        FileSaver.saveAs(res, '附件.zip'); // 使用 FileSaver.saveAs 保存文件，文件名可自定义
      });
  });
}

该函数接收一个包含文件 URL 的数组 downloadURL，遍历数组中的每个文件 URL，调用 getFileData 函数获取文件数据，并将其添加到 JSZip 实例对象 zip 中。最后，通过 zip.generateAsync 方法生成压缩后的 zip 文件，并使用 FileSaver 库实现文件的下载。

小结

以上就是本文分享的文件格式转换与下载的实现方法。通过这些代码，我们可以方便地实现文件的格式转换和下载功能，提高前端开发的效率。