从 HTML 生成 pdfmake header 和页脚：渲染不完整

Question

我正在开发一款可以导出 PDF 的浏览器应用程序。此 PDF 必须包含 user-defined header 和页脚。这些 header 和页脚作为字符串存储在数据库中，并通过 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 传递给函数，则 header 显示不正确。 <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 渲染？提前致谢！

Answer 1

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

像这样：

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

     /* ... */

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

从 HTML 生成 pdfmake header 和页脚：渲染不完整

Generating pdfmake header & footer from HTML: incomplete rendering

javascript

html

pdf-generation

pdfmake