3

I am using pdfMake to create pdf document in my angular project. Meanwhile, I want to create the zip file containing my multiple pdf documents.

Are there any possible to do so? Your answers or ideas are appreciated.

chourn solidet
  • 300
  • 5
  • 19
  • See [Multiple download links to one zip file before download javascript](http://stackoverflow.com/questions/37176397/multiple-download-links-to-one-zip-file-before-download-javascript/) – guest271314 Dec 26 '16 at 02:22
  • My case is that I already created pdf document and converted to base64. After I download the zip, I get nothing inside. – chourn solidet Dec 26 '16 at 03:09
  • 1
    Did you trying using `zip.file()`, `zip.generateAsync({ type: "blob" })`? Is "base64" a valid `data URI`? Can you include `javascript` that you have tried at Question? See also [How to convert base64 to zip and move to server](http://stackoverflow.com/questions/38934833/how-to-convert-base64-to-zip-and-move-to-server/). – guest271314 Dec 26 '16 at 03:14
  • Thank for your idea. I go with JSZip. Now I add my base64 pdf to file. Before, I get nothing because my code tried to download zip before adding pdf (because I use setInterval to create multiple pdf docs). It works okay now :D I fixed that but I haven't tested on other browsers yet (chrome only). One more thing now, I am looking for ways to change my zip file name. – chourn solidet Dec 26 '16 at 04:57
  • You can set the name of the `.zip` file at `download` attribute of `` element; see first link. – guest271314 Dec 26 '16 at 08:36
  • 1
    @chournsolidet Can you put the code here? – Sabreena Dec 07 '17 at 10:40

1 Answers1

0

Did a similar task this way. Wrote a website in react.

import JSZip from 'jszip';
import * as FileSaver from "file-saver";
import * as pdfMake from "pdfmake/build/pdfmake";
interface forzip {
  array: any[];
  wordHeaders: string[];
  dataKeys: string[];
  image?: any;
  headerName?:string
}
export const getHtmlStringFromJson = (
  data: {}[],
  headers: string[],
  dataKeys: string[],
  headerName?:string
) => {
  let tableHeaders = "";
  headers.forEach((h) => (tableHeaders += "<th>" + h + "</th>"));
  let tableBody = "";
  data?.forEach((d) => {
    tableBody += "<tr>";
    dataKeys.forEach((dk) => {
      //@ts-ignore
      tableBody += "<td>" + d[dk] + "</td>";
    });
    tableBody += "</tr>";
  });
  let html =
    `<p>`+headerName!+`</p>
    <table border="1">
      <thead>
        <tr>` +
    tableHeaders +
    `</tr>
      </thead>
      <tbody>` +
    tableBody +
    `</tbody>
    </table>`;
  return html;
};
export const export2zip = (arrforzip:forzip[]) => {
  (window as any).pdfMake.vfs = pdfFonts.pdfMake.vfs;

  const zip = new JSZip();
  var  pdf = zip.folder("pdf");

  arrforzip.map(function(forpdf,i) {
    let htmlString = getHtmlStringFromJson(forpdf.array, forpdf.wordHeaders, 
    forpdf.dataKeys,forpdf.headerName!);
    let htmlPdf = htmlToPdfmake(htmlString)
    let pdfData = pdfMake.createPdf({content:htmlPdf});
    pdfData.getBlob(blob => {
    pdf?.file(
      `${forpdf.headerName}.pdf`,
      blob,
      { binary: true }
    );
    });
  })
  zip.generateAsync({type:"blob"}).then(function (blob) {
  zip.generateAsync({type:"blob"})
  .then(function(content) {FileSaver.saveAs(content, `examples.zip`);});
  });
};

export2zip(completData)
Cyril Strone
  • 3
  • 2
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 22 '22 at 10:42