前端远程下载csv的zip文件,解压后转为json数据

198 阅读1分钟

背景:由于数据量巨大,后端采用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);
        }
      });
    });
  };