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

Question

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

是否有可能实现这样的功能呢？欢迎您提供答案或建议。

- chourn solidet

---

请参见JavaScript 实现多个下载链接指向同一个 zip 文件。 - guest271314

我的情况是我已经创建了PDF文档并将其转换为base64。但是在下载zip文件后，里面什么都没有。 - chourn solidet

你尝试使用过 zip.file() 和 zip.generateAsync({ type: "blob" }) 吗？"base64" 是有效的 data URI 吗？你能否在问题中包含你尝试过的 javascript 代码？另请参阅 如何将 base64 转换为 zip 并移动到服务器。 - guest271314

谢谢你的建议。我使用JSZip库。现在我将我的base64格式的PDF文件添加到了zip文件中。之前，因为我使用setInterval创建多个PDF文档，所以我的代码尝试在添加PDF之前下载zip文件，结果什么也没得到。现在它可以正常工作了：D 我已经修复了这个问题，但我还没有在其他浏览器上测试过（只在Chrome上测试）。 还有一个问题，我正在寻找更改zip文件名的方法。 - chourn solidet

您可以在<a>元素的download属性中设置.zip文件的名称；请参见第一个链接。 - guest271314

@chournsolidet，你能把代码放在这里吗？ - Sabreena

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)

- Cyril Strone

---

你的回答可以通过添加更多支持信息来改进。请[编辑]以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是否正确。你可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community