Menu
I have two divs: div1 and div2.
Maintaining the original css styles applied to the div2 element being printed.
I don't want to print content inside div1 but only the inside of div2.
How to print?
710
Try this
<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>
I faced lots of issues while printing a div (part of HTML) using window.print(). Used below method and it works seamlessly in edge, chrome and Mozilla. How this below function helps mitigate the issue that I face is by the use of iframe. When using window.print() without the below code it was printing most of the page's design and all, which we didn't want. There are many CSS based options too but eventually this one below worked for me. From the below code "frameDoc.document.write........ frameDoc.document.close();" is controlling the format that can be seen in print preview as well.
function printDiv(id) {
var contents = document.getElementById(id).innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write("<html><head>\n\n " +
"<style type=\"text/css\" media=\"print\">\n " +
"@@page\n {\n " +
"size: auto; /* auto is the initial value */\n " +
"margin: 10mm; /* this affects the margin in the printer settings */\n " +
" }\n\n html\n {\n " +
" background-color: #FFFFFF;\n " +
" }\n\n body\n " +
" { font-family:\"Times New Roman\", Times, serif;\n " +
" border: none ;\n " +
" margin: 0; /* margin you want for the content */\n " +
" }\n .table {\n width: 100%;\n " +
" max-width: 100%;\n margin-bottom: 20px;\n " +
" border-collapse: collapse;\n " +
" background-color: transparent;\n display: table;\n " +
" }\n .table-bordered {\n " +
" border: 1px solid #ccc;\n }\n tr {\n " +
" display: table-row;\n vertical-align: inherit;\n " +
" border-color: inherit;\n padding:15px;\n }\n " +
" .table-bordered tr td {border: 1px solid #ccc!important; padding:15px!important;}\n " +
" </style><title></title></head><body>".concat(contents, "</body>"));
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
Call this like
<a href="#" onclick="javascript:printDiv('divwithcontenttoprint')"> Print </a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
