在使用 PhantomJS 渲染为 PDF 时,我可以将外部 HTML 文件作为页眉/页脚包含在内吗?

Can I include external HTML files as headers/footers when rendering to PDF with PhantomJS?

本文关键字:文件 HTML 包含在内 外部 PhantomJS PDF 我可以      更新时间:2023-09-26

我正在尝试设置一种将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();
});

它可以添加页眉和页脚,但需要内联样式(我相信我可以用这些方法解决(,但我更愿意能够选择外部 HTML 文件,以便 a( 可以根据正在转换的文件类型使用不同的页眉和页脚;b(以便可以轻松编辑HTML文件而无需更改JS文件。

这是头 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>

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

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

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