Window.Print（）を使用して印刷した後にCSSが表示されないのはなぜですか？

私のページに1つの特定のdivを印刷したいと思います。Window.Print（）を使用して印刷した後に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表：

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

私が印刷ウィンドウに次のように取得しています：

しかし、これはあるので、私は、次のコードを使用しています行うには私のオリジナルデザイン：

しかし、印刷するときには、ラベルやTDごとに指定されたCSSスタイルは使用されません。これで私を助けてください。ありがとう。

出典

2016-03-23 barsan

あなたのhtmlテーブルを共有することができます – ahmdabos

HTMLテーブルで私の更新された質問を確認してください。 – barsan

document.createElement('style')を使用してsytle要素を作成してみてください。

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

}

出典

2016-03-23 06:22:06 RRK

お返事ありがとうございました。しかし、それはまだ同じです。 TDの背景色はPDFプリントに反映されません。 – barsan

私のためにうまく動作している、フォントサイズや色のような他のスタイルを追加し、それが動作するかどうかを確認しようとする?? – ahmdabos

[OK]を、ここでの作業コードがあり、私はあなたの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>

ノートを更新し、小さなテストスタイルでテストテーブルを追加しました：私はちょうどでWindowObject.document.writeln(DocumentContainer.innerHTML);

この行を置き換えますhtml直接

と私はスタイルに小さなCSS属性を追加しました

-webkit-print-color-adjust: exact;

出典

2016-03-23 07:07:40 ahmdabos

私に答えを書く時間を取ってくれてありがとう、ありがとう。しかし、私はこの行を置き換えるときも同じです。WindowObject.document.writeln（ '

table for test

'）; WindowObject.document.writeln（DocumentContainer.innerHTML）を使用した。 – barsan

Window.Print（）を使用して印刷した後にCSSが表示されないのはなぜですか？

答えて

関連する問題