When attempting to print a modal with specific data exactly as it appears, I encountered an issue where the Bootstrap classes were not being recognized during the printing process. This resulted in a change to the layout of the content printed.
function printDiv() {
var winPrint = window.open();
/*var header = '@include("report/header")';*/
/*var body = '@include("memberpayment/monthlybill")';*/
var body = document.getElementById('printarea').innerHTML;
winPrint.document.write(body);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
The modal can be viewed here.
A preview of the print view can be seen here.
Researching online, it was suggested that including the bootstrap library before writing the print content could resolve this issue (source).
Attempts using the jQuery plugin printThis and customizable multiple elements printing plugin with jQuery did not provide a suitable solution for my case.
In another reference thread(source), introducing media="print" to the link appeared promising but did not yield the expected results.
The Modal code:
<div class="container-fluid" id="printarea" style="padding: 2rem 4rem;">
<!-- Code omitted for brevity -->
</div>