Question

我正在尝试打印一个div，其背景图像和CSS相关联。经过多次努力，我可以设法让它在Chrome浏览器中运行，但相同的代码在IE中无效。任何帮助表示赞赏。

代码是：

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();'>

输出如下： CHROME ：

IE ：

这是div结构：

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

使用JS打印在IE中不起作用

0 个答案: