Search code examples
angularexport-to-csvjszip

can we use JSZip with Angular7Csv for zipping the multiple csv file?


below is code for downloading csv file in zip format but am not sure whether it support or not when we use both plugin at time because am getting this error: Can't read the data of 'pdfs/[object Object]'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ? at jszip.js:3472

import { AngularCsv } from 'angular7-csv';

var data = [
  {
    name: "Test 1",
    age: 13,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
  {
    name: 'Test 2',
    age: 11,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
];

this.reportCSV =new AngularCsv(data, 'My Report');


 downloadZip() {
    var zip = new JSZip();

    var pdf = zip.folder("Reports");


    this.reportCSV.forEach((i) => {
      pdf.file(i+'.csv', { base64: true });
    });

    zip.generateAsync({ type: "blob" }).then(function (content) {
      FileSaver.saveAs(content, "example.zip");
    });
  }

somethings needs to add in code or it is not possible to combine angular7csv with jsZip?


Solution

  • No! Angularcsv is independent package only used to download the csv format file. It automatically convert your data in comma separated format along with your header. After processing your data new AngularCsv(data, 'My Report'); this line trigger the download and file get downloaded. For more info https://www.npmjs.com/package/angular7-csv

    Now to come to your question you can achieve csv file in zip folder functionality by traditional way of code

    const header = ["name","age","average","approved","description"];
    const replacer = (key, values) => values === null ? '' : values // specify how you want to handle null values here
    this.csvdata = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
    this.csvdata.unshift(header.join(','));
    this.csvdata = this.csvdata.join('\r\n');
    

    and pass the this.csvdata to downloadzip() method

    downloadZip()
    {      
        zip.file("Myfile", this.csvdata);
        zip.generateAsync({ type: 'blob' }).then((content) => {  
           if (content) {  
                FileSaver.saveAs(content, name);  
             }  
        }); 
    }