Print DIV Content with CSS, not working

Question

<script type="text/javascript">
    function PrintElem(elem) {
        Popup($(elem).html());
    }
    function Popup(data) {
        var mywindow = window.open('', 'mydiv', 'height=550,width=750');
        mywindow.document.write('<html><head><title></title>');
        mywindow.document.write('<link rel="stylesheet" href="~/Content/Site.css" type="text/css" media="print" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

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

        mywindow.print();
        mywindow.close();

        return true;
    }
</script>

Here is my Javascript that prints the DIV and that works fine. But my CSS isn't loading, I can tell because I did a test color of pink and it still isn't showing up. Please help. HEre is my CSS

@media print {
    .mydiv {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
        color:pink;
    }
}

Is there any HTML element with the class of mydiv that is being sent to data? — imvain2
– imvain2, Commented Apr 29, 2016 at 15:33

imvain2 · Accepted Answer · 2016-04-29 15:31:27Z

1

the problem is most likely the fact that your CSS is trying to reference the NAME of the WINDOW and not any object within the WINDOW. Since we don't know what is being sent as data try this:

change

mywindow.document.write(data);

to

mywindow.document.write("<div class='mydiv'>" + data + "</div>");

answered Apr 29, 2016 at 15:31

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Kudryashev · Accepted Answer · 2016-04-29 15:17:43Z

I did similar (in fact the same) task and did it as follow:

Open "Print Version" document (empty template) and in its onload event retrieve div I need from its parent.
Sample code:

<!-- parent doc -->
<input type="button" value="Printer Version" onclick="doIt()" />
<div id="divPrint" style="display:none;">
   <iframe id="frPrint"></iframe>
</div>
<script>
function doIt(){
   document.getElementById('divPrint').style.display = '';
   document.getElementById('frPrint').src = "print.html?a=" + Math.random();//to avoid caching
}
function getContent(){
   return document.getElementsById('divData').innerHTML;
}
</script>

<!--print.html -->
...
<script type="text/javascript">
    window.onload = function () {
        var a = this.parent.getContent();
        document.body.innerHTML = a;
    }
    function printMe() {
        window.print();
    }
</script>
<style type="text/css">
    .right
    {
        float: right;
    }
</style>
<link href="/Styles/print.css" media="print" rel="stylesheet" />
...

Emmanuel López · Accepted Answer · 2016-04-29 15:19:58Z

0

I cant see in your code the reference to the class that link your CSS with the Html tag, try something like that:

mywindow.document.write('</head><body><div class="mydiv">');
mywindow.document.write(data);  
mywindow.document.write('</div></body></html>');

Regards

answered Apr 29, 2016 at 15:19

Emmanuel López

1665 bronze badges

Comments

Gagantous · Accepted Answer · 2017-10-07 17:23:08Z

@media print only works when you simple call window.print() function. Here what you are doing is creating popup and inside it you are placing your html. So you have to include all css like below way. Refer my below code.

$(".printtt").on("click",function(e){ 
                var mywindow = window.open('', 'my div', 'height=400,width=600');
                                    mywindow.document.write('<html><head><title>my div</title>');
                                    //mywindow.document.write("<link rel=\"stylesheet\" href=\"css/bootstrap.min.css\" type=\"text/css\" media=\"print\" />");
                                    //mywindow.document.write("<link rel=\"stylesheet\" href=\"css/sb-admin.css\" type=\"text/css\"  />");
    mywindow.document.write('<style>.printtt{color:pink;}</style>');
                                    mywindow.document.write('</head><body >');
                                    mywindow.document.write($("#page-wrapper").html());
                                    mywindow.document.write('</body></html>');
                    
    setTimeout(function () {
                            mywindow.print();
                        },1000);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="aaaaa">
    </div>
    <div id="page-wrapper">
    <a href="javascript:void(0);" class="printtt">Print</a>
    </div>

Collectives™ on Stack Overflow

Print DIV Content with CSS, not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related