Menu
I need to make a report in HTML that is supposed to be A4 size exactly. It needs headers and footers. Surely this can be done with css yeah?
does anyone have any examples or sample code for this?
I googled and the code snippets I got all talk about media queries and they don't work..
so basically it is for print Purposes, the html generated will be converted to a PDF document. I am using MVC4 and found a tool that will convert a view to a PDF. A view is just pure HTML. So I thought why not style the HTML to represent the output report, then PDF it.
So I need the ability to have a header, and a footer (bottom of the page) and then content in the middle of both of them
I tried using the following code, but it doesn't seem to work..
<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>
576
CSS can be used to set width/height to a real-world size; for example in your print.css file:
div.A4 {
width: 21 cm;
height: 29.7 cm;
margin: 0;
}
However, HTML/CSS really isn't meant for this purpose; media queries really are the best way to handle this. I'd really recommend you put a little more time trying to get them working; it's worth the time if you plan on using this website more than once.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
