printing div content with css applied

asp.net, css, javascript

Solution

If you wanna render the CSS you must add a timeout before printing it because it takes some time for CSS to be applied to the HTML and then you will be able to print it.

Try this:

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;
}

Problem

I am working on a project and I want to print div content.The code which I am using is fulfilling my requirements,but I am getting simple output without Css applied to it and also not getting the image.Please help me.I am attaching the code and output I am getting and 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; } ``` Output I am getting before clicking print button: Output I am getting by clicking print button:

Original source