0

I am trying to print a div which has background image and CSS associated to it. After much struggle i coul manage to get it working in Chrome browser but the same code is not working in IE. Any help appreciated.

Code is :

function printDiv() {
        var data = $("#newTemplate").html()

        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/NewCSS.css" media="print" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        setTimeout(function () {
            mywindow.print();
        }, 500);
        return false;

    }

<input type='button' id='btn' value='Print' onclick='printDiv();'>

The output looks like : CHROME : enter image description here

IE :

enter image description here

This is the div structure :

<div class="hidden" id="newTemplate">
                <div class="card-preview" id="card-preview">
                    <div class="card thank-you-card">
                        <h2 class="type-heading">
                            <asp:Label ID="lblHeader" runat="server"></asp:Label></h2>
                        <%--<img src="" alt="" class="card-icon">--%>
                        <asp:Image ID="img" runat="server" class="card-icon" />
                        <div class="centered-content">
                            <div class="content-wrapper">
                                <h1>Thank you!</h1>
                                <p class="employee-names">
                                    <asp:Label ID="lblEmpNames" runat="server"></asp:Label>

                                </p>
                                <p class="message">
                                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                                </p>
                            </div>
                        </div>

                        <p class="sender-name">
                            <asp:Label ID="lblSenderName" runat="server"></asp:Label>
                        </p>
                        <p class="date">
                            <asp:Label ID="lblDateSent" runat="server"></asp:Label>
                        </p>
                    </div>
                </div>
            </div>

CSS

@media print {
  body {-webkit-print-color-adjust: exact;}
}

.card-preview .card { position: absolute; left: 50%; top: 50%; -webkit-transform: scale(0.2) translate(-50%, -50%); transform: scale(0.2) translate(-50%, -50%); width: 2550px; height: 3300px; -webkit-transform-origin: left top; transform-origin: left top; color: #6d6e71; background: #fff url(../Images/bg-card.svg) no-repeat center/contain; }

.card-preview .card h2 { position: absolute; right: 35%; top: 16%; font-size: 92px; font-weight: normal; margin: 0; padding-bottom: 0; border: 0; color: #bababa; text-transform: uppercase; display: inline-block; text-align: right; }

.card-preview .card .card-icon { position: absolute; right: 12%; top: 5%; width: 21%; }

.card-preview .card .sender-name { position: absolute; left: 0; bottom: 19%; width: 100%; padding: 0 400px; text-align: center; font-size: 64px; }

.card-preview .card .date { position: absolute; left: 0; bottom: 14.3%; width: 100%; padding: 0 400px; text-align: center; font-size: 64px; }

.card-preview .card .centered-content { position: absolute; left: 0; top: 26%; width: 100%; height: 46%; padding: 0 400px 50px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.card-preview .card .centered-content .content-wrapper { width: 100%; }

.card-preview .card .centered-content h1 { margin-bottom: 0.3em; padding-bottom: 0; border: 0; font-size: 220px; font-weight: normal; color: #559cb5; }

.card-preview .card .employee-names { font-size: 90px; font-weight: normal; color: #559cb5; width: 100%; padding-bottom: 0.8em; margin-bottom: 0.8em; border-bottom: 5px solid #ebebec; }

.card-preview .card .employee-names.font-size-medium { font-size: 72px; }

.card-preview .card .employee-names.font-size-small { font-size: 48px; }

.card-preview .card .message { font-size: 70px; margin-bottom: 0; }
Improve this question
5
  • can you show the related css code? Commented Feb 8, 2018 at 11:45
  • @JordiCastilla updated the question. Commented Feb 8, 2018 at 11:57
  • try this mywindow.document.write('<script>window.print()</script>'); before closing the body tag Commented Feb 8, 2018 at 12:00
  • @angel.bonev I am unale to ad the statement Commented Feb 8, 2018 at 13:22
  • not sure to post an answer but I think you need to add css styles inside media tag... also check msdn.microsoft.com/en-us/library/ms533037(v=vs.85).aspx and stackoverflow.com/questions/28169881/… Commented Feb 9, 2018 at 11:07
Related questions
0
Trouble with printing in IE
0
window.print IE6 and jQuery
68
window.print() not working in IE
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.