我试图设置一种将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>
虽然我知道我可以通过第一个示例实现类似的功能,但我希望尽可能将文件分开。
答案 0 :(得分:0)
有简单的方法,只需读取header.html文件将其分配给一个变量并在标题部分
中使用它var fs = require('fs');
var headerContent = fs.read('header.html');
header: {height: "1cm",contents: headerContent}