printing div content with css applied

Question

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 an

Answer 1

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 linkelement.

This code works, though partially:

    (function() {

function createPopup( data ) {
    var mywindow = window.open( "", "new div", "height=400,width=600" );
    mywindow.document.write( "" );
    mywindow.document.write( "" );
    mywindow.document.write( "" );
    mywindow.document.write( data );
    mywindow.document.write( "" );

    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.