Recently, I've been working on creating an HTML report that I need to print out. In order to achieve this, I decided to make use of AngularPrint plugin (https://github.com/samwiseduzer/angularPrint).
However, I encountered a problem when trying to print the report using Firefox. The content was overflowing the page boundaries and not properly fitting in one page.
On the other hand, when testing the same report with Google Chrome, the browser automatically created new pages to prevent content overflow issues.
I attempted to address this problem by utilizing native window.print function as shown below:
$scope.printReport = function(myhtml) {
var content = document.getElementById(myhtml).innerHTML;
var original = document.body.innerHTML;
document.body.innerHTML = content;
window.print();
document.body.innerHTML = original;
}
This is how my HTML code looks like when using AngularPrint:
<!-- printable area -->
<div class="content" print-section>
...
...
</div>
To trigger the printing process, I added a button as follows:
<button class="btn btn-success" id="btnPrinReport" print-btn> Print Data </button>