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

Question

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.

Answer 1

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");
    });
  });
}