How to save zip with pdf in it using jszip and pdfmake?

Viewed 549

I want to create pdfs with pdfmake, use jszip to add them into 1 folder, and then download this folder as a zip, but when I want to download the zip, it is empty. What am I missing?

My code below:

for (let i = 0; i < 3; i++) {
  const dd = {
    content: [
      "First paragraph",
      "Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines"
    ]
  };

  const ddPdf = this.$pdfmake.createPdf(dd);
  const examples = zip.folder("examples");
  examples.file(`Hello${i}.txt`, "Hello World\n");
  ddPdf.getBlob(blob => {
    examples.file(
      `example${i}.pdf`,
      blob,
      { binary: true }
    );
  });
}

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

The downloaded zip doesn't have the pdfs, only the txts.

2 Answers

you haven't provide full example of your code, so I can't run it, but it looks like:

You've created folder examples, you've put a file into it, and then took pure zip object, and saved it as example.zip;

PS: Pay attention, that you are calling examples.file and zip.generateAsync asynchronously, what may cause another issues. I would recommend you put your zip.generateAsync inside ddPdf.getBlob callback.

It might be something like:

 const ddPdf = this.$pdfmake.createPdf(dd);
  const examples = zip.folder("examples");
  ddPdf.getBlob(blob => {
    examples.file(
      "example.pdf",
      blob,
      { binary: true }
    );

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

I ran into a similar issue in my app:

let ddPdf = pdfMake.createPdf(docDefinition);
ddPdf.getBlob(blob => {
    console.log('Flag')
})

The callback function would never fire. Same for base64 and buffer methods. Not sure why.

I fixed it as:

//Inside PDF generator loop
let ddPdf = pdfMake.createPdf(docDefinition);
let ddPdfBlob = await ddPdf.getBlob(); //ddPdfBlob now holds the Blob
examples.file(`example${i}.pdf`, ddPdfBlob, {binary: true})

//after all loops
examples.generateAsync({type:"blob"})
.then(function(content) {
   saveAs(content, `examples.zip`);
});

Related