为什么在使用Window.Print()打印后没有显示CSS?

时间:2016-03-23 06:15:22

标签: javascript html css

我想在我的页面中打印一个特定的div。为此,我使用以下代码:

    <script type="text/javascript">
    function printDiv(divID) {
        var DocumentContainer = document.getElementById(divID);
        var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');

        WindowObject.document.writeln('<!DOCTYPE html>');
        WindowObject.document.writeln('<html><head>');
        WindowObject.document.writeln('<style type="text/css" media="all">.labelalign {float: right !important;}.design {font-size: 16px;}.design1 {font-size: 15px;}.td {background-color: #A4A4A4;}</style>');
        WindowObject.document.writeln('</head><body>');
        WindowObject.document.writeln(DocumentContainer.innerHTML);
        WindowObject.document.writeln('</body></html>');

        WindowObject.document.close();
        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();

    }
</script>


<asp:Button ID="Btnpdfprint" runat="server" Text="Print to PDF" OnClientClick="javascript:printDiv('mydiv')" />

HTML表:

<table style="width: 899px;" align="center" cellpadding="4" cellspacing="3">
                <tr>
                    <td style="width: 50%;">
                        <%-- <asp:Label ID="lblcandidateid" runat="server" Text="Label" CssClass="design1" ></asp:Label>--%>



                    </td>

                    <td style="width: 50%">



                        <%--<asp:Image ID="candidateimg" runat="server" ImageUrl="img/avatar1_small.jpg" ImageAlign="Right" Width="90px" Height="83px" />--%></td>

                </tr>

                <tr>
                    <td class="td" style="border: solid 1px;" colspan="2"><b class="design" style="background-color: #A4A4A4;">Personal Details</b>
                        <%-- <asp:Label ID="txtcandidatename" runat="server" Text="Label" CssClass="design1">

                </asp:Label>--%>
                    </td>
                </tr>

                <tr>
                    <td><b class="design">Name:&nbsp;</b><asp:Label ID="txtcandidatename" runat="server" CssClass="design1" Text="Label"></asp:Label>
                    </td>
                    <td><b class="design">Nationality:&nbsp;</b><asp:Label ID="txtnationality" runat="server" CssClass="design1" Text="Label"></asp:Label>
                    </td>

                </tr>

                <tr>
                    <td><b class="design">Languages:&nbsp;</b><asp:Label ID="txtlanguage" runat="server" Text="Label" CssClass="design1"></asp:Label>

                    </td>
                    <td><b class="design">Current Address:&nbsp;</b><asp:Label ID="txtcurrentaddress" runat="server" CssClass="design1" Text="Label"></asp:Label>
                    </td>

                </tr>

                <tr>

                    <td><b class="design">Marital Status:&nbsp;</b><asp:Label ID="txtmaritalstatus" runat="server" Text="Label"></asp:Label>

                    </td>

                    <td><b class="design">Date of Birth:&nbsp;</b><asp:Label ID="txtdob" runat="server" Text="Label" CssClass="design1"></asp:Label>

                    </td>

                </tr>



                <tr>
                    <td class="td" style="border: solid 1px;" colspan="2" style="background-color: #A4A4A4;"><b class="design">Career Objective</b></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="txtcandidateobjective" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>

                <tr>
                    <td class="td" style="border: solid 1px;" colspan="2" style="background-color: #A4A4A4;"><b class="design">Career Profile</b></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="txtcareerprofile" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>

                <tr>
                    <td class="td" style="border: solid 1px;" colspan="2"><b class="design">Key Areas of Expertise</b></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="txtskills" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>

                <tr>
                    <td class="td" style="border: solid 1px;" colspan="2"><b class="design">Professional Experience</b></td>
                </tr>

                <tr>
                    <td>
                        <asp:Label ID="txtcompanyname" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                    <td>
                        <asp:Label ID="txtdate" runat="server" Text="Label" CssClass="design1" align="right"></asp:Label>
                    </td>

                </tr>
                <tr>
                    <td colspan="2"><i class="design">
                        <asp:Label ID="txttitle" runat="server" Text="Label" CssClass="design1"></asp:Label></i>

                    </td>
                </tr>
                <tr>
                    <td colspan="2"><b class="design"><i>Key Responsibilities</i></b></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="txtkeyresponsibilities" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>
                <tr>
                    <td colspan="2"><b class="design"><i>Key Achievements</i></b></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="txtkeyachievements" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>
                <tr>
                    <td class="td" style="border: solid 1px;" colspan="2"><b class="design">Education</b></td>
                </tr>
                <tr>
                    <td colspan="2"><b class="design">Education:&nbsp;</b>
                        <asp:Label ID="txteducation" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>
                <tr>
                    <td colspan="2"><b class="design">Location:&nbsp;</b>
                        <asp:Label ID="txtlocation" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>
                <tr>
                    <td colspan="2"><b class="design">Major:&nbsp;</b>
                        <asp:Label ID="txtmajor" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>
                <tr>
                    <td colspan="2"><b class="design">Year of Passing:&nbsp;</b>
                        <asp:Label ID="txtpassing" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>
                <tr>
                    <td class="td" style="border: solid 1px;" colspan="2"><b class="design">Certification</b></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="txtcertification" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
                </tr>
                <tr>
                    <td class="td" style="border: solid 1px;" colspan="2"><b class="design">References</b></td>

                </tr>
                <tr>
                    <td>Will be presented upon request</td>
                </tr>

            </table>

我正在进入打印窗口:

PDF Printing

但这是我原来的设计:

enter image description here

但是当它打印时,它没有为每个标签或TD指定任何CSS样式。请帮帮我。感谢。

2 个答案:

答案 0 :(得分:0)

尝试使用sytle创建document.createElement('style')元素。

function printDiv(divID) {
    var DocumentContainer = document.getElementById(divID);
    var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
    var style = document.createElement('style');
    var css = '.labelalign {float: right !important;}.design {font-size: 16px;}.design1 {font-size: 15px;}.td {background-color: #A4A4A4;}';
    WindowObject.document.writeln('<!DOCTYPE html>');
    WindowObject.document.writeln('<html><head>');
    WindowObject.document.writeln('</head><body>');
    WindowObject.document.writeln(DocumentContainer.innerHTML);
    WindowObject.document.writeln('</body></html>');
    style.type = 'text/css';
    if (style.styleSheet){
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    head = WindowObject.document.head || WindowObject.document.getElementsByTagName('head')[0];
    head.appendChild(style);
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();

}

答案 1 :(得分:0)

好的,这是你的工作代码,我添加了一个小测试样式的测试表,更新到你的html

-webkit-print-color-adjust: exact;

注意:我刚刚替换了这一行/usr/local/cpanel/3rdparty/php/54/

直接使用html

我在样式

中添加了小css属性
#!/usr/local/cpanel/3rdparty/php/54/php