Login

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:
<script type="text/javascript">

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

</script>

Output I am getting before clicking print button:
![enter image description here][1]

Output I am getting by clicking print button:
![enter image description here][2]

[1]:

[2]:

A possible cause of your rendering issue may be due to the relative paths you're using for the CSS file and images. First, try to use absolute paths. The fact that the HTML structure is rendered excludes problems with the generation of the new HTML document. Also, add `media="print"`to the `link`element.

This code works, though 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've removed the .close() call. Bear in mind that some CSS styles may not work with print.

You need to change the css property `media` to `print`.
Add new line to your function createPopup() as below you attached your css:

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

If you are using image as background image of site you will definitely not get it, while printing browser disables all background images.

Try to use **img** tags instead. Also make sure in your browser disable images option is not checked.

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

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

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

Doing this will always allow enough time for the document and the CSS to load before the print window opens, and then closes the window immediately after the print dialogue closes.

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

Pass the div to be printed, as an input to print function,

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

Then clone the element,

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

Pass the cloned element to render, 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.

I combined and had this working perfectly:

function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');

mywindow.document.write('<html><head>');
mywindow.document.write("<link href=\"../lib/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\"><link href=\"../css/core.css\" rel=\"stylesheet\"><link href=\"../css/components.css\" rel=\"stylesheet\"><link href=\"../css/icons.css\" rel=\"stylesheet\">")
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById('printit').innerHTML);
mywindow.document.write('</body></html>');

mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/

setTimeout(function () {
mywindow.print();
mywindow.close();
}, 1000)
return true;
}

adjuncts526248

vincentkngxmbyb

destitution871

hearthstones811702

kietqlpuoim

gertrmhee

airbursts117732

cherritafaxhmvx

juans847703