javascript - 使用pdfMake创建PDF后如何下载zip文件

Question

我正在使用 pdfMake 在我的 Angular 项目中创建 pdf 文档。同时，我想创建包含我的多个 pdf 文档的 zip 文件。

有没有可能这样做？感谢您的回答或想法。

Answer 1

以这种方式完成了类似的任务。在 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)