如何使用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 库实现文件的下载。