我需要用HTML制作一个应该是A4尺寸的报告.它需要页眉和页脚.当然这可以用css来完成吗？
有没有人有任何示例或示例代码？
我用谷歌搜索和代码片段,我得到所有谈论媒体查询,他们不工作..
所以基本上它是用于打印目的,生成的html将转换为PDF文档.我正在使用MVC4并找到了一个将视图转换为PDF的工具.视图只是纯HTML.所以我想为什么不用HTML来表示输出报告,然后用PDF表示.
所以我需要能够有一个标题和一个页脚(页面底部),然后内容在两个中间
我尝试使用以下代码,但它似乎没有工作..
<html>
<head>
<style type="text/css" media="all">
@page {
size: A4 portrait; /* can use also 'landscape' for orientation */
margin: 1.0in;
border: thin solid black;
padding: 1em;
@bottom-center {
content: element(footer);
}
@top-center {
content: element(header);
}
}
#page-header {
display: block;
position: running(header);
}
#page-footer {
display: block;
position: running(footer);
}
.page-number:before {
content: counter(page);
}
.page-count:before {
content: counter(pages);
}
</style>
</head>
<body>
<div id="page-header">
<p>Header text</p>
</div>
<div id="page-footer">
<p>Footer text</p>
<p>Page <span class="page-number"/> of <span class="page-count"/></p>
</div>
<div id="page-content">
<p>Page 1.</p>
<p style="page-break-after:always;"/>
<p>Page 2.</p>
</div>
</body>
</html>
CSS 可用于将宽度/高度设置为实际尺寸；例如在您的 print.css 文件中：
div.A4 {
width: 21 cm;
height: 29.7 cm;
margin: 0;
}
然而，HTML/CSS 实际上并不是用于此目的；媒体查询确实是处理这个问题的最佳方法。我真的建议你多花一点时间让它们工作；如果您计划多次使用该网站，那么花时间是值得的。