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

时间:2014-12-21 22:01:08

标签: javascript html node.js pdf phantomjs

我试图设置一种将HTML文件呈现为PDF的方法。 HTML文件是动态生成的,并且页眉和页脚都有单独的HTML文件,需要附加到每个页面。

我能否让PhantomJS获取这些单独的文件并在页眉和页脚部分显示它们?当我在传递给PhantomJS的javascript文件中为他们提供HTML时,我可以获得页眉和页脚,如我所包含的示例代码中所示,但我不熟悉HTML,CSS,Javascript(和节点?)足以知道是否有明确的方法来做我想要的。

这就是我现在所拥有的:

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)这样可以轻松编辑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>

虽然我知道我可以通过第一个示例实现类似的功能,但我希望尽可能将文件分开。

1 个答案:

答案 0 :(得分:0)

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

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