CODEWITHSUNDEEP
javascriptjqueryhtmlcssprinting
Cecily
Cecily

Reputation: 61

Print DIV Content with CSS, not working

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

Upvotes: 0

Views: 7057

Answers (4)

prashant
prashant

Reputation: 184

@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>

Upvotes: 0

imvain2
imvain2

Reputation: 15847

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>");

Upvotes: 1

Emmanuel L&#243;pez
Emmanuel L&#243;pez

Reputation: 166

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

Upvotes: 0

Alex Kudryashev
Alex Kudryashev

Reputation: 9460

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" />
...

Upvotes: 0

Related Questions