Work with Angular 2

[stephenad]

Hi

I am using an angular 2, is it still possible to use jszip as I cannot upgrade to a newer version of angular at this point?

If so is there a working plunker or other demo where I can see it all in action so I can implement it in my angular project?

Thanks Andy

[stephenad]

If anyone is able to assist it would greatly appreciated

[stephenad]

Hope someone can help these are the errors I get in my compiler:

ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/adminarea/admin_options/zipfiles/jszip.component.ts (4,24): Cannot find module 'jszip'.

ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/app.module.ts (26,24): Cannot find module 'jszip'.

Any suggestions

[Keepertje]

I use it with angular 4.2.4, all i did was npm install --save jszip and then at the top of the service import * as JSZip from 'jszip';

[stephenad]

Hi @Keepertje ,

Thanks for the reply. Is this a service file I should have for this module, or is it service under another section can you let me know the file you have and show me what you have in your file please.

Thanks Andy

[Keepertje]

@stephenad I decided to make a separate zipService (for the sake of maintainability and such). But that should not be necessary I guess.

import { Injectable } from '@angular/core';
import * as JSZip from 'jszip';

@Injectable()
export class ZipService {

  // Get the content
  public getZipContent(file) {
    const jszip = new JSZip();
    return jszip.loadAsync(file).then((zip) => {
      // Do something with the zipcontent
      });
  }

  // Get the actua blobs from the zip
  public unzip(file) {
    const jszip = new JSZip();
    jszip.loadAsync(file).then((zip) => {
      Object.keys(zip).forEach((filename) => {
        zip[filename].async('blob').then((blobFile) => {
          // Do something with the blob file
        });
      });
    });
  }
}

[stephenad]

Hi @Keepertje,

Thanks for the reply and service I will give it a try and see how things go

Andy

[rodrigoserracoelho]

Hello @Keepertje Thanks a lot, it works really good! Best, Rodrigo

[orangewords]

Thank you, @Keepertje.

[saifanam]

Just wanted to add, depending on your compilerOptions in tsconfig, you may get an error like "Could not find a declaration file for module 'jszip'". In that case, all you need to do is create a global.d.ts file at the root level, and type declare module 'jszip'; into it. It should work fine.

[sanmscse]

Is jsZip do read .docx file using fileReader? so that i could set the readed data in html editor? my blob will be this.myblob = "blob:http://localhost:49842/d673f9dd-5653-413b-b5ff-429cf21191bf"

[sebastientromp]

With the latest version (3.2.2), I know have to use new JSZip.default(). Is there something to be done to be able to simply use new JSZip(), which is more intuitive?

[Arunwahatule85]

Below is code in which i am creating data for csv file and downloading csv file in zip folder:

generateCSVfiles()
{
     this.studentdata.forEach(function (student)
{
      this.service.getStudentDetails(student.studentId).subscribe
          (res => {
            var dataSet =  JSON.parse (res);
            // start
            if (student.studentId == "Senior") {
             
               const header = ["studentId","studentName","studentaddress", "studentmarks", "studentgrade"];
              const replacer = (key, values) => values === null ? '' : values // specify how you want to handle null values here
              this.seniordata = dataSet.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
              this.seniordata.unshift(header.join(','));
              this.seniordata = this.seniordata.join('\r\n');
            }
            else  (student.studentId == "Junior") {
                const header = ["studentId","studentName","studentaddress", "studentmarks", "studentgrade"];
              const replacer = (key, values) => values === null ? '' : values // specify how you want to handle null values here
              this.juniordata = dataSet.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
              this.juniordata.unshift(header.join(','));
              this.juniordata = this.juniordata.join('\r\n');
               
            }
        this.downloadzip();
   }
}.bind(this)
}
   

public downloadzip()
{
	
	 let zip = new JSZip();
      // Fill CSV variable
    	  // i am getting two separate zip file by below logic but need to 
         //implement  logic here to add two different file in one zip folder
      zip.file( 'Studentrecord'+'.csv', this.juniordata);
	  zip.file( 'Studentrecord'+'.csv', this.seniordata);
    
    zip.generateAsync({
      type: "base64"
    }).then(function (content) {
      window.location.href = "data:application/zip;base64," + content ;
    });

}

Above code working fine and able to download csv file inside zip folder when we got response data for one of junior or Senior student at a time. but when we received both junior and senior data at time then it downloading different zip file or sometimes only one zip file getting generated. but i want both file in one zip folder. can someone guide me how to download different csv file in one zip folder.

this.studentdata =[{studentId: "Senior"
StudentName: "Rock"},{studentId: "Junior"
StudentName: "John"}] 

this type of data available in mentioned variable

dataset = [{studentId: "Senior"
StudentName: "Rock",studentaddress:"US",studentmarks:"56",studentgrade:"A"},{studentId: "Junior"
StudentName: "John",studentaddress:"UK",studentmarks:"59",studentgrade:"B"}] 

this type of data coming from json