In my Angular demo project, I have included basic text and a table. There is a print button that calls window.print() to print the page with applied styling.
printPage() {
window.print();
}
CSS:
@media print {
@page {
size: landscape;
margin: 0;
}
}
Link to my demo project: https://stackblitz.com/edit/angular-qxlcna?file=src/print/print.component.ts https://i.sstatic.net/Ezu5f.png
My goal is to print the table in landscape mode exactly as it appears on the webpage, without any cropping.^
After clicking the print button, the preview on Chrome's print dialog looks great as shown below
https://i.sstatic.net/2FcO3.png
Unfortunately, the printed result is not as expected. There are crops from the left and right sides of the paper. Despite my attempts to set margin: 0 and padding: 0 styles, it did not work. How can I print exactly what I see on the HTML page?
I also tried this styling:
@media print {
* {
margin: 0 !important;
padding: 0 !important;
}
html,
body {
height: 100%;
overflow: visible;
}
}