While creating my A4 invoice using HTML, CSS, and JS, everything appears correctly in the print preview. However, I am encountering an issue where the page number is not aligned properly and extra empty pages are generated automatically.
Below is a snippet of the code:
<html>
<head>
<script>function setPrintStyles(pagesize, standardSize) {
var documentHeight = standardSize ? '' : (document.getElementsByTagName('html')[0].offsetHeight / 2) + 100 + 'px';
var bodySize = standardSize ? '' : 'body { width: ' + pagesize + '; }';
var css = `@media print { @page { size: ${pagesize} ${documentHeight}; } ${bodySize} }`,
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
}</script>
<style type="text/css">
/* Styling for printing */
</style>
<style>
html {
height: 297mm !important;
overflow-y: scroll;
}
</style>
</head>
<body><!--!-->
<table>
/*Invoice details*/
</table>
<div id="dpi" style="height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;"></div>
<script>window.print();</script>
<script>/* Script to add/remove page numbers */</script>
</body>
</html>Issue Encountered:
Despite having code for generating a single-page A4 invoice, it results in two pages during print preview with visible page numbers on the invoice itself.
Visual Representation:
Second Page:
Script Used for Page Numbering:
/* Javascript function to handle page numbering */Expected Result: The generated invoice should align properly within the defined 297mm height constraint of an A4 page.
If you save this code as an HTML file and view it in a browser, there might be differences in how the output is displayed compared to expectations.