Convert json object to csv files and merge them using JSZip

0
votes

I am using the below function to convert a JSON object to a CSV file and download it. This part is doing fine.

const JSONToCSVConvertor = (JSONData, ReportTitle, ShowLabel) => {
    //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
    var arrData =
        typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData;

    var CSV = '';

    //This condition will generate the Label/Header
    if (ShowLabel) {
        var row = '';

        //This loop will extract the label from 1st index of on array
        for (var index in arrData[0]) {
            //Now convert each value to string and comma-seprated
            row += index + ',';
        }

        row = row.slice(0, -1);

        //append Label row with line break
        CSV += row + '\r\n';
    }

    //1st loop is to extract each row
    for (var i = 0; i < arrData.length; i++) {
        var row = '';

        //2nd loop will extract each column and convert it in string comma-seprated
        for (var index in arrData[i]) {
            row += '"' + arrData[i][index] + '",';
        }

        row.slice(0, row.length - 1);

        //add a line break after each row
        CSV += row + '\r\n';
    }

    if (CSV === '') {
        alert('Invalid data');
        return;
    }

    //Generate a file name
    var fileName = '';
    //this will remove the blank-spaces from the title and replace it with an underscore
    fileName += ReportTitle.replace(/ /g, '_');

    //Initialize file format you want csv or xls
    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
    // generate a temp <a /> tag
    var link = document.createElement('a');
    link.href = uri;

    //set the visibility hidden so it will not effect on your web-layout
    link.style = 'visibility:hidden';
    link.download = fileName + '.csv';

    //this part will append the anchor tag and remove it after automatic click
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    // console.log('finish download one file');
};

Right now I am trying to create a zip file based on the JSON objects. I am planning to use the JSZip library.

     for (var i = 0; i < 5; i++) {
         zip.file('file' + i + '.csv', escape(CSV));
     }

     zip.generateAsync({ type: 'base64' }).then((base64) => {
         window.location = 'data:application/zip;base64,' + base64;
     });

escape(CSV) in the above code snippet is the proper CSV file format. This code snippet does not create a zip file and does not throw any error code. It only brings my current page to about:blank#blocked.

But if I change the second parameter of zip.file() to 'csv data', it works and gives me a zip file.

My solution is

  1. to download the CSV files using the JSONToCSVConvertor function
  2. using the JSZip library to read the CSV files from the local repository and zip them.

I think this way is not the best way to do it, because I have to download multiple CSV files before zipping them.

1
javascriptjszip

1 Answers