I'm dealing with a large project and part of it is printing HTML pages.
However, we are dealing with the issue of pages do not fit within the Letter size paper.
Please see the following simple code: As you see the dimensions of the Letter paper are clearly specified. The page shows correctly on the web browser and even on the Print Preview page, it shows correctly. However, after printing on a US Letter size paper the word "Test" is cut off a bit on top and left. Also, the black border does not show on print. Why does this happen?
See below:
<style>
/* Reset default margin and padding on body */
@page {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
/* Create a full-screen div */
.full-screen-div {
width: 8.5in; /* 100% of the viewport width */
height: 11in; /* 100% of the viewport height */
Border: solid 5px
}
.TR{
position:absolute;
margin-top:0;
margin-right:0;
font-size:24px;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<title>Full-Screen Div</title>
</head>
<body>
<div class="full-screen-div">
<!-- Content goes here -->
<span class='TR'>Test</span>
</div>
</body>
</html>
I put my research here for the future viewer.
I did a huge amount of research for 2 days looking all over the internet to find a solution.
The bottom line is when trying to print an HTML page, the print function in the browser is not a reliable way to preserve the layout.
I just saved the page as a PDF file on my computer and then the page was printed exactly as it should have.
Another option is to buy 3rd party HTML to PDF software that integrates with the coding language(I am using a C# app) and then dynamically create your pdf.