Geek Answers Handbook

Printing div content using css

I am working on a project and I want to print the contents of a div. The code that I use fulfills my requirements, but I get simple output without applying Css to it, and also without getting an image. Please help me. I attach the code and the output that I get and the output I want.

code:

function PrintElem(elem) { Popup($(elem).html()); } function Popup(data) { var mywindow = window.open('', 'new div', 'height=400,width=600'); mywindow.document.write('<html><head><title></title>'); mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />'); mywindow.document.write('</head><body >'); mywindow.document.write(data); mywindow.document.write('</body></html>'); mywindow.print(); mywindow.close(); return true; }

The output that I get before pressing the print button: enter image description here

The output that I get by pressing the print button: enter image description here

+16
source share
7 answers

You need to change the css media property to print . Add a new line to your createPopup () function, as shown below:

 mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>" );
+9
source

If you want to make CSS, you must add a timeout before printing it, because it takes some time for the CSS to be applied to the HTML and you can print it.

Try the following:

 function Popup(data) { var mywindow = window.open('', 'new div', 'height=400,width=600'); mywindow.document.write('<html><head><title></title>'); mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />'); mywindow.document.write('</head><body >'); mywindow.document.write(data); mywindow.document.write('</body></html>'); mywindow.document.close(); mywindow.focus(); setTimeout(function(){mywindow.print();},1000); mywindow.close(); return true; }
+8
source

My suggestion is to add some javascript to the <body> tag for printing and closing.

<body onload="window.print();window.close()">

Doing this will always allow enough time to load the document and CSS before the print window opens, and then close the window immediately after closing the print dialog. A.

+3
source

If you use the image as the background image of the site, you certainly will not get it, and when printing the browser, turn off all background images.

Try using img tags. Also make sure that in your browser disable the image function is not checked.

+1
source

A possible cause of the rendering problem may be due to the relative paths that you use for the CSS file and images. First try using absolute paths. The fact that the HTML structure is rendered eliminates the problem of creating a new HTML document. Also, add media="print" to the link element.

This code works, although partially:

  (function() { function createPopup( data ) { var mywindow = window.open( "", "new div", "height=400,width=600" ); mywindow.document.write( "<html><head><title></title>" ); mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\"/>" ); mywindow.document.write( "</head><body >" ); mywindow.document.write( data ); mywindow.document.write( "</body></html>" ); mywindow.print(); //mywindow.close(); return true; } document.addEventListener( "DOMContentLoaded", function() { document.getElementById( "print" ).addEventListener( "click", function() { createPopup( document.getElementById( "content" ).innerHTML ); }, false ); }); })();

I removed the .close () call. Keep in mind that some CSS styles may not work with printing.

0
source 
  function printpage() { var getpanel = document.getElementById("<%= Panel1.ClientID%>"); var MainWindow = window.open('', '', 'height=500,width=800'); MainWindow.document.write('<html><head><title></title>'); MainWindow.document.write("<link rel=\"stylesheet\" href=\"styles/Print.css\" type=\"text/css\"/>"); MainWindow.document.write('</head><body onload="window.print();window.close()">'); MainWindow.document.write(getpanel.innerHTML); MainWindow.document.write('</body></html>'); MainWindow.document.close(); setTimeout(function () { MainWindow.print(); }, 500) return false;

}

0
source

Pass the div to print as input to the print function,

 <input type='button' id='btn-print' value='Print Receipt' onclick="printDiv('#invoice-box-id');" />

Then clone the item,

 function printDiv(elem) { renderMe($('<div/>').append($(elem).clone()).html()); }

Pass the cloned element for rendering, include the stylesheet in it.

 function renderMe(data) { var mywindow = window.open('', 'invoice-box', 'height=1000,width=1000'); mywindow.document.write('<html><head><title>invoice-box</title>'); mywindow.document.write('<link rel="stylesheet" href="printstyle.css" type="text/css" />'); mywindow.document.write('</head><body >'); mywindow.document.write(data); mywindow.document.write('</body></html>'); setTimeout(function () { mywindow.print(); mywindow.close(); }, 1000) return true; }

If innerHTML is passed, it will ignore the styles.

0
source

More articles:


All Articles