在使用 PhantomJS 渲染为 PDF 时,我可以将外部 HTML 文件作为页眉/页脚包含在内吗?
Can I include external HTML files as headers/footers when rendering to PDF with PhantomJS?
我正在尝试设置一种将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}
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- 导入jQuery脚本获胜'我不处理html文件
- 生成pdf或其他非html文件时的错误处理
- 从HTML调用typescript文件中的函数
- 使用metro-uiJS对话框调用其他文件html
- 使用选项卡导航到不同的html文件(html、JavaScript)
- 使用 socket.io 时如何发送文件(html,js,css和资源)
- 采购<p>从.txt文件.HTML
- 包含的html中的类无法访问父文件html中的函数
- 重新加载链接文件 HTML
- 如何使用 JavaScript 或 JQuery 从输入类型=文件 html 元素获取文件名
- Angularjs + 指令文件 html 内容点击事件在 js 文件中不起作用
- 如何直接从网页读取/写入本地文件 (html)
- jQuery加载txt文件.html()
- 指定简单配置文件HTML或javascript的最佳方式是什么
- Angular将所有头文件html提取到一个文件中
- 想要部分上传大文件.HTML/PHP
- AJAX -上传文件(HTML 5) &PHP