背景:由于数据量巨大,后端采用csv文件的方式存储数据,使用zip文件的格式分片传给前端,前端需要自己获取后拼接。
需求:下载远程压缩成zip的csv文件后并读取csv转化为json
用到的库: jszip(压缩/解压 zip文件),papaparse(csv转json)
主要通过blob二进制格式进行格式转化
直接贴代码
import JSZip from 'jszip';
import Papa from 'papaparse';
interface ICsvFilesInfo {
id: string;
link: string; // zip文件地址
originalName: string;
}
// 通过链接下载csv文件
const downloadCsvFiles = (csvFilesInfo: ICsvFilesInfo[]) => {
return new Promise((resolve, reject) => {
const finalDataObj = {};
csvFilesInfo.map(async (item,index) => {
// window.open(item)
if (item.link) {
const link = item.link;
// 使用blob格式远程获取zip对象
const blob:Blob = await request(link, { responseType: 'blob', charset: 'utf8' });
console.log(blob.type);
// 解压zip文件成csv文件
const csvFiles = await JSZip.loadAsync(blob)
// csv文件转为json
const jsonData = await zipBlobToJson(csvFiles)
finalDataObj[item.originalName] = jsonData
if(index === csvFilesInfo?.length-1){
resolve(finalDataObj)
}
}
});
})
};
// csv转json
const parseCsv = (fileData: any) => {
return new Promise((resolve, reject) => {
Papa.parse(fileData, {
header: true,
complete: (results) => {
resolve(results.data);
},
});
});
};
//
const zipBlobToJson = (csvFiles: any) => {
return new Promise((resolve, reject) => {
const obj = {}
const kesArr = Object.keys(csvFiles.files)
kesArr.forEach(async (filename,index) => {
if (filename === '/') return;
const fileData: any = await csvFiles.files[filename].async('blob');
// csv文件转为json
const jsonData = await parseCsv(fileData);
obj[filename] = jsonData
console.log(index);
console.log(kesArr.length);
// 当全部遍历完
if(index === kesArr?.length-1){
resolve(obj);
}
});
});
};