1. ev
  2. Soru-cevap
  3. Neden Window.Print() kullanarak yazdırdıktan sonra CSS gösteriliyor?

Neden Window.Print() kullanarak yazdırdıktan sonra CSS gösteriliyor?

2016-03-23 17 views
1

Sayfamda belirli bir div yazdırmak istiyorum.Neden Window.Print() kullanarak yazdırdıktan sonra CSS gösteriliyor?

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

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

yazdırdığımı penceresine böyle alıyorum:

PDF Printing

Ama bu Ve bu yüzden aşağıdaki kodu kullanıyorum yapmak özgün tasarımım:

enter image description here

Ancak, yazdırıldığında, her etiket veya TD için belirtilen herhangi bir CSS stili alınmıyor. Lütfen bana yardımcı ol. Teşekkürler.

kaynak

2016-03-23 barsan

+0

Benim için iyi çalışıyor, html tablonuzu – ahmdabos

+0

numaralı telefondan paylaşabilirsiniz güncellenmiş bir tabloyu HTML tablosu ile kontrol edebilirsiniz. – barsan

cevap

0

document.createElement('style') numaralı telefonu kullanarak sytle öğesini oluşturmayı deneyin.

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

}

kaynak

2016-03-23 06:22:06 RRK

+0

Cevabınız için çok teşekkürler. Ama yine de aynı. TD'nin arka plan rengi PDF Yazdırmaya yansıtılmıyor. – barsan

+0

benim için iyi çalışıyor, yazı tipi boyutu ve rengi gibi başka bir stil eklemeyi deneyin ve çalışıp çalışmadığını kontrol edin ?? – ahmdabos

0

Tamam, burada

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

notları html güncellendi küçük bir test tarzı ile çalışma kodu, ben eklemiş test tablo şöyledir: ben sadece bu çizgiyi WindowObject.document.writeln(DocumentContainer.innerHTML);

değiştirilir html doğrudan

ve ben küçük css özniteliğini ekledim

-webkit-print-color-adjust: exact;

kaynak

2016-03-23 07:07:40 ahmdabos

+0

Bana cevap yazmak için zaman ayırdığınız için çok teşekkür ederim. Ancak bu satırı WindowObject.document.writeln ('

table for test
') değiştirdiğimde hala aynıdır; WindowObject.document.writeln (DocumentContainer.innerHTML) ile ; – barsan

İlgili konular

 İlgili konular