使用 PhantomJS 渲染为 PDF 时，是否可以将外部 HTML 文件作为页眉/页脚包含在内？答案

【问题标题】：Can I include external HTML files as headers/footers when rendering to PDF with PhantomJS?使用 PhantomJS 渲染为 PDF 时，是否可以将外部 HTML 文件作为页眉/页脚包含在内？
【发布时间】：2015-02-20 01:18:08
【问题描述】：

我正在尝试设置一种将 HTML 文件呈现为 PDF 的方法。 HTML 文件是动态生成的，它们的页眉和页脚有单独的 HTML 文件，需要附加到每个页面。

我能否让 PhantomJS 提取这些单独的文件并将它们显示在页眉和页脚部分？当我在传递给 PhantomJS 的 javascript 文件中为它们提供 HTML 时，我可以获得页眉和页脚，就像我包含的示例代码一样，但我对 HTML、CSS、Javascript（和 Node？）不够熟悉知道是否有明确的方法来做我想做的事。

这是我目前拥有的：

var page = require('webpage').create();

//set the page size and add headers & footers
page.paperSize = {
  format: 'A4',
  margin: '.5cm',
  header: {
    height: "1cm",
    contents: phantom.callback(function(pageNum, numPages) {
    return "<h1 style='font-size:12.0; font-family:Arial,Helvetica,FreeSans,sans-serif'>Header <span style='float:right'>" + pageNum + " / " + numPages + "</span></h1>";
    })
  },
  footer: {
    height: "1cm",
    contents: phantom.callback(function(pageNum, numPages) {
    return "<h1 style='font-size:12.0; font-family:Arial,Helvetica,FreeSans,sans-serif'>Footer <span style='float:right'>" + pageNum + " / " + numPages + "</span></h1>";
    })
  }
}

//open the page
page.open('tools.html', function() {
  page.render('woki2.pdf');
  phantom.exit();
});

它可以添加页眉和页脚，但需要内联样式（我相信我可以使用these methods），但我希望能够获取外部 HTML 文件，以便 a) 不同的页眉和页脚可以根据要转换的文件类型使用； b) 以便在不更改 JS 文件的情况下轻松编辑 HTML 文件。

这是一个 HTML 头文件的例子：

<!DOCTYPE html>
<html>

<head>
    <script>
    function subst() {
        var vars = {};
        var x = window.location.search.substring(1).split('&');
        for (var i in x) {
            var z = x[i].split('=', 2);
            vars[z[0]] = unescape(z[1]);
        }
        var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection', 'date', 'time'];
        for (var i in x) {
            var y = document.getElementsByClassName(x[i]);
            for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
        }
    }
    </script>
</head>

<body style="border:0; margin: 0;" onload="subst()">
    <table style="width: 100%">
        <tr>
            <td>Generated by *person* on <span class="date"></span> <span class="time"></span></td>
            <td style="text-align:right">
                Page <span class="page"></span> of <span class="topage"></span>
            </td>
        </tr>
    </table>
</body>

</html>

虽然我知道我可以实现与第一个示例类似的东西，但如果可能的话，我更愿意将文件分开。

【问题讨论】：

你的意思是外部自定义模板文件？
@ArtjomB。我将在问题中添加一个 HTML 文件示例，因为我可能应该一开始就包含它。

标签： javascript html node.js pdf phantomjs

【解决方案1】：

有一种简单的方法，只需读取 header.html 文件，将其分配给一个变量并在标题部分使用它

var fs    = require('fs');
var headerContent   = fs.read('header.html');
header: {height: "1cm",contents: headerContent}

【讨论】：