背景:前端批量获取到了文件路径,需要下载到本地,多条数据则打包压缩下载压缩包。
本文将会使用JSZip和FileSaver.js
1、安装JSZip和FileSaver.js:
yarn add jszip file-saver -S
2、引入依赖:
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
3、读取文件方法:
/**
* 读取文件
* @param fetchUrl 文件路径
*/
async function fetchBlob(fetchUrl, method = 'GET', body = null) {
const response = await window.fetch(fetchUrl, {
method,
body: body ? JSON.stringify(body) : null,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
});
const blob = await response.blob();
return blob;
}
4、批量压缩下载:
/**
* 打包压缩下载
* @param data 源文件数组
* @param fileName 压缩文件的名称
*/
export const compressAndDownload = (data, fileName) => {
const zip = new JSZip();
const promises = [];
data.forEach((item) => {
const promise = fetchBlob(item.fileUrl).then((res) => {
const fileName = item.fileName;
zip.file(fileName, res, { binary: true });
});
promises.push(promise);
});
return new Promise((resolve) => {
Promise.all(promises).then(() => {
zip
.generateAsync({
type: 'blob',
compression: 'DEFLATE', // STORE:默认不压缩 DEFLATE:需要压缩
compressionOptions: {
level: 9 // 压缩等级1~9 1压缩速度最快,9最优压缩方式
}
})
.then((res) => {
resolve();
saveAs(res, fileName || '压缩包.zip'); // 利用file-saver保存文件
});
});
});
};
5、单条文件下载:
/**
* 下载单个文件
* @param url 文件路径
* @param fileName 下载文件的名称
*/
export const download = (url, fileName) => {
saveAs(url, fileName);
};