从 HTML 生成 pdfmake 页眉和页脚：不完整的渲染答案

【问题标题】：Generating pdfmake header & footer from HTML: incomplete rendering从 HTML 生成 pdfmake 页眉和页脚：不完整的渲染
【发布时间】：2021-10-25 12:14:28
【问题描述】：

我正在开发一个应该导出 PDF 的浏览器应用程序。此 PDF 必须具有用户定义的页眉和页脚。这些页眉和页脚作为字符串存储在数据库中，并通过 API 调用获取。

我为此使用 pdfmake 和 htmltopdfmake。我正在解析这些 HTML 字符串，如下所示：

exportReportToPDF (tableData, tableKeyMap, reportSettings, reportTitle) {
      /* Style constants */
      const blue = '#044e99'
      const marginArray = [40, 5, 0, 10]
      const documentDefinition = {}
      const rawHTMLStyles = {
        h1: {
          fontSize: 16,
          color: blue,
          margin: marginArray
        },
        h2: {
          fontSize: 14,
          color: blue,
          margin: marginArray
        },
        h3: {
          fontSize: 12,
          color: blue,
          margin: marginArray
        },
        p: {
          fontSize: 8,
          margin: marginArray
        },
        hr: {
          margin: [0, 0, 0, 0]
        }

      }

      /* Generate header and footer */
      if (reportSettings.header && reportSettings.footer) {
        const header = htmlToPdfmake(reportSettings.header, {
          defaultStyles: rawHTMLStyles,
          imagesByReference: true
        })
        const footer = htmlToPdfmake(reportSettings.footer, {
          defaultStyles: rawHTMLStyles,
          imagesByReference: true
        })
        documentDefinition.header = header.content
        documentDefinition.footer = footer.content
      }

      /* irrelevant code redacted  */

      pdfMake.createPdf(documentDefinition).open()
    },

这不太好。如果我将此作为reportSettings 传递给函数，则标题显示不正确。 <h1> 出现，但 <h2> 没有出现。

{
  "id": 1,
  "title": "Prueba",
  "header": "<h1>Lorem Ipsum Dolor Sit Amet</h1><h2>consectetur adipiscing elit</h2>",
  "footer": "<p>Lorem ipsum 2021</p>",
  "created": "2021-07-06T15:21:10.864259Z",
  "updated": "2021-07-06T15:21:10.864358Z",
  "creator": 1
}

我做错了什么？我应该如何使这个 HTML 呈现？提前致谢！

【问题讨论】：

标签： javascript html pdf-generation pdfmake

【解决方案1】：

在this GitHub issue找到了解决方案！增加文档的pageMargins 会使隐藏线出现。似乎文档的正文隐藏了页眉和页脚，好像它具有更高的 z-index。

像这样：

exportReportToPDF (tableData, tableKeyMap, reportSettings, reportTitle) {
      const documentDefinition = {
        pageMargins: [40, 80, 40, 80]
      }

     /* ... */

      pdfMake.createPdf(documentDefinition).open()
    },

【讨论】：