asp.net Printing Page using javascript

Question

I have a table with some styling like border,color etc. I want to print this table with the styling. How can I achieve this currently only raw data in showing without styling. this is my table.

         <div id="printpage" runat="server">

                <div class="col-lg-9">

                       <div style="width: 100%" align="center" class="table-responsive" runat="server" id="ActivityInfoDiv">
                        <table cellpadding="2" cellspacing="2" class="ruled">
                             <tr>
                                <td>
                                    <b>School Name:</b>
                                </td>

                                <td style="text-align: center">

                                    <asp:Literal ID="ltrSchoolName" runat="server"></asp:Literal>
                                </td>

                                <td>
                                    <b>District:</b>
                                </td>

                                <td style="text-align: center">

                                    <asp:Literal ID="ltrDistrict" runat="server"></asp:Literal>
                                </td>


                                <td>
                                    <b>Total Enrollement:</b>
                                </td>

                                <td style="text-align: center">

                                    <asp:Literal ID="ltrTotalEnrollement" runat="server"></asp:Literal>
                                </td>

                                <td>
                                    <b>Phase:</b>
                                </td>

                                <td style="text-align: center">

                                    <asp:Literal ID="ltrPhase" runat="server"></asp:Literal>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
             </div>

Button to Print.

      <asp:Button ID="BtnPrint" runat="server" OnClientClick="javascript:CallPrint('printpage');" Text="Print"  Width="80px"/>

Function to Print.

             <script language="javascript" type="text/javascript">
    function CallPrint(strid) {
        var prtContent = document.getElementById(strid);
        var WinPrint = window.open('', '', 'letf=0,top=0,width=1200,height=800,toolbar=0,scrollbars=0,status=0,dir=ltr');
        WinPrint.document.write(prtContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
        prtContent.innerHTML = strOldOne;
    }
</script>

I have more then one table in printpage div.

Ankit · Accepted Answer · 2017-10-16 10:36:03Z

1

I guess you are unable to print your table with styling (colored border and graphics which used in your table or page) to achieve that in print you need to turn on "Print Background colors and images" which will be turn off by default. to change this settings you can check your browser print setup or print setting section and enable Print color and graphics section. or you need to mention css for print section as well to show same style like this in your stylesheet file. @media print{ your css goes here }

answered Oct 16, 2017 at 10:36

Ankit

262 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

raja Over a year ago

I have border as well as color of table but it is not showing any border and color of table when i try to print the doc

Ankit Over a year ago

pls try to add css in your string also. You are taking only "prtContent" which will take only selected elements or string only, so you need to add styles with that string or elements. for e.g: add this line in to your div and before the table " <style type="text/css"> table{border:1px #ccc solid;background-color:#333;color:#fff;} </style>"

Collectives™ on Stack Overflow

asp.net Printing Page using javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related