Warum erscheint nach dem Drucken mit Window.Print() kein CSS?

Ich möchte ein bestimmtes Div auf meiner Seite drucken. Und zu tun, so verwende ich den folgenden Code:Warum erscheint nach dem Drucken mit Window.Print() kein CSS?

<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 Tabelle:

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

Ich bin wie diese in das Druckfenster bekommen:

Aber das ist mein ursprüngliches Design:

Beim Drucken wird jedoch kein CSS-Stil für jedes Etikett oder TD festgelegt. Bitte helfen Sie mir dabei. Vielen Dank.

Quelle

2016-03-23 barsan

es funktioniert gut für mich können Sie Ihre HTML-Tabelle teilen – ahmdabos

überprüfen Sie bitte meine aktualisierte Frage mit HTML-Tabelle. – barsan

Versuchen Sie, das Element sytle mit document.createElement('style') zu erstellen.

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

}

Quelle

2016-03-23 06:22:06 RRK

Vielen Dank für die Antwort. Aber es ist immer noch das Gleiche. Die Hintergrundfarbe für den TD spiegelt nicht den PDF-Druck wider. – barsan

es funktioniert gut für mich, versuchen Sie, andere Stil wie Schriftgröße und Farbe hinzuzufügen und prüfen, ob es funktioniert? – ahmdabos

Ok, hier sind Ihre Arbeits Code, habe ich hinzugefügt Testtabelle mit kleinem Test Stil, aktualisiert, um Ihre HTML

<Button ID="Btnpdfprint" runat="server" Text="Print to PDF" OnClick="printDiv('mydiv')" />click</button> 

<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">#mydiv{color:red;font-size:30px; background-color: #1a4567 !important;-webkit-print-color-adjust: exact; }</style>'); 
     WindowObject.document.writeln('</head><body>'); 
     WindowObject.document.writeln('<div id="mydiv"><table><tr><td>table for test</td></tr></table></div>'); 
     WindowObject.document.writeln('</body></html>'); 

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

    } 
</script>

Hinweise: i ersetzt nur diese Zeile WindowObject.document.writeln(DocumentContainer.innerHTML);

mit der html direkt

und ich habe kleine CSS-Attribut, um den Stil hinzugefügt

-webkit-print-color-adjust: exact;

Quelle

2016-03-23 07:07:40 ahmdabos

Vielen Dank, dass Sie sich die Zeit genommen haben, mir die Antwort zu schreiben. Aber es ist immer noch dasselbe, wenn ich diese Zeile ersetze WindowObject.document.writeln ('

table for test

'); mit WindowObject.document.writeln (DocumentContainer.innerHTML); – barsan

Warum erscheint nach dem Drucken mit Window.Print() kein CSS?

Antwort

Verwandte Themen