是否可以在每个打印页面上打印带有自定义页眉和页脚的HTML页面？
无论内容如何,我都想在每个打印页面的顶部和底部添加Red,Arial,16pt大小的单词"UNCLASSIFIED" .
为了澄清,如果文档打印在5页上,则每个页面都应具有自定义页眉和页脚.
有人知道这是否可以使用HTML/CSS？
我正在使用Flying Saucer(将CSS/HTML转储到iText到PDF)创建PDF,我正在尝试使用CSS3将图像页眉和页脚应用到每个页面.
我基本上想把这个div放在每个页面的左上角:
<div id="pageHeader">
<img src="..." width="250" height="25"/>
</div>
我的CSS看起来有点像这样:
@page {
size: 8.5in 11in;
margin: 0.5in;
@top-left {
content: "Hello";
}
}
有没有办法让我把这个div放进去content？
我希望每个打印页面都重复我的表格标题,但似乎谷歌Chrome不能<thead>很好地支持标签......有没有办法解决这个问题？我正在使用Google Chrome v13.0.782.215.
表格代码非常简单......没什么特别的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
@page {
size: landscape;
margin-top: 0;
margin-bottom: 1cm;
margin-left: 0;
margin-right: 0;
}
table {
border: .02em solid #666; border-collapse:collapse;
width:100%;
}
td, th {
border: .02em solid #666; font-size:12px; line-height: 12px;
vertical-align:middle; padding:5px; font-family:"Arial";
}
th { text-align:left; font-size:12px; font-weight:bold; }
h2 { margin-bottom: 0; }
</style>
</head>
<body>
<h2>Page Title</h2>
<table>
<thead>
<tr class="row1">
<th><strong>Heading 1</strong></th>
<th><strong>Heading 2</strong></th> …根据我的研究,似乎我想做的事情是不可能的,但是如果事情发生了变化,我想检查是否有人想出办法来做到这一点.
我有一个Web应用程序,它根据浏览器窗口中的用户选择生成打印报告.我有一个自定义页眉和页脚,当从浏览器打印报告时,应在每个打印页面上重复.它不是我需要的浏览器页眉和页脚,而是我生成的自定义页眉和页脚.另外,我不认为这是CSS和媒体类型的问题,但我不是CSS专家.我没有问题让页眉和页脚打印一次,但我不能让它们在每页上打印.我已经读过,如果我使用表重新创建报表页面,然后使用表头标记和CSS,这可能至少可以在每个页面上获取标题.我还没有成功,但如果它是唯一的选择,我会再试一次.一位同事建议我在我的php中计算行数并根据需要手动输出页眉和页脚.我想这是一个选项,但它似乎应该有一种方法来做到这不是那么"蛮力"!
另一个需要注意的是,我必须支持IE 6,所以我怀疑我尝试过的一些CSS内容是不受支持的.
如果有人知道如何做到这一点,那将是伟大的!如果没有,我将不得不重新考虑我的方法.
提前致谢!
更新(2011年12月14日)
我在这个问题上取得了相当大的进步,并且使用了答案中的一些信息,我确实生成了可用的报告,但从未如我所希望的那样好或专业.页脚的页面底部往往不够近,我不得不做大量的猜测工作和关于插入分页符决定大文本的"脆弱"计算,我只能支持限制页面格式集,以及对报告的任何更改都会导致一系列代码更改,但更加脆弱的计算.总有一种情况打破了某些报道的某些部分.我们重新审视了这些要求,现在使用TCPDF生成报告为PDF.文档有点不透明,需要进行一些实验,但结果要好得多,现在报告应该显示出来.我会对任何试图从浏览器做HTML报告的人说,除非它们非常简单,省去挫折(正如其他人在这里告诉我的那样)并使用PDF或类似的东西.
亲爱的,我尝试了CSS位置:固定属性,但它在Firefox和IE上运行正常(黑客入侵IE6),但它根本不适用于Chrome.我认为最新的Chrome会很容易支持它,但事实并非如此.我试过<thead>,<tfoot> <tbody>再次在IE和Firefox中工作,但在Chrome中有问题.请任何人有一个替代解决方案.
我正在做噩梦,想弄清楚如何正确设置CSS和HTML布局,以便在我们的网络应用程序中打印文档.我们有不同的文件进入系统(订单,发票,交货单,......).文件包括:
我想要的是遵循打印功能:
目前我的HTML布局是这样的:
<!-- STATIC HEADER -->
<div id="pageHeader">
<table class="table">
<tr>
<td>Static header content here</td>
</tr>
</table>
</div>
<!-- DOCUMENT CONTENT -->
<div id="pageBody">
<!-- Customer data -->
<table class="table">
<tr>
<td>Customer data here</td>
</tr>
</table>
<!-- Items table -->
<table class="table table-condensed table-print">
<thead style="display:table-header-group;">
<tr>
<th>Table header here</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rows here</td>
</tr>
</tbody>
</table>
</div>
<!-- STATIC FOOTER -->
<div id="pageFooter">
<table class="table">
<tr>
<td>Static footer content …css ×3
printing ×3
footer ×2
header ×2
html ×2
css3 ×1
html-table ×1
html5 ×1
pdf ×1
stylesheet ×1