0

Net c# website i have an html report is there.Now i want to take a printout of the same.So i used Javascript and its showing only the popup box ,not the content.how to solve this issue.

Javascript

<script type="text/javascript">
        function PrintDiv() {
            var divToPrint = document.getElementById('widget-content');
            var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
            popupWin.document.open();
            popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
            popupWin.document.close();
        }
         </script>

button Click

<input type="button" onclick="PrintDiv()" value="Print" />

HTML Content

 <div class="widget-content">
                    <div class="invoice-content">
                        <div class="invoice-head">
                            <div class="invoice-meta">
                                <%--Invoice <span class="invoice-number">#96558 </span><span class="invoice-date">Date:
                                    2012-07-15</span>--%>
                            </div>
                            <h5 style="margin-left: 40%; height: 20px; font-size: large">
                                Order Form</h5>
                            <div class="invoice-to">
                                <ul>
                                    <li><span>Booking Date:<asp:Label ID="dispbookingDate" runat="server"></asp:Label></span>
                                        <span>Name<asp:Label TextMode="MultiLine" runat="server" ID="dispName"></asp:Label></span>
                                        <span>Address:<asp:Label TextMode="MultiLine" runat="server" ID="dispAddress"></asp:Label></span>
                                    </li>
                                </ul>
                            </div>
                            <div class="invoice-from">
                                <ul>
                                    <li><span>Order No.<asp:Label ID="dispOrderNo" runat="server"></asp:Label></span> <span>
                                        Wedding Date:<asp:Label runat="server" ID="dispWeddingDate"></asp:Label></span>
                                        <span>Malayalam Date:<asp:Label runat="server" ID="dispWeddingMalayam"></asp:Label></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <table class="table table-bordered table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th class="style1">
                                            Description
                                        </th>
                                        <th class="style2">
                                            Rs.
                                        </th>
                                        <th>
                                            Ps.
                                        </th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th class="total-label" colspan="2">
                                            Total:
                                        </th>
                                        <th class="total-amount">
                                            <asp:Label ID="dispTotal" runat="server"></asp:Label>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th class="total-label" colspan="2">
                                            Adavance:
                                        </th>
                                        <th class="total-amount">
                                            <asp:Label ID="dispAvance" runat="server"></asp:Label>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th class="total-label" colspan="2">
                                            Balance:
                                        </th>
                                        <th class="total-amount">
                                            <asp:Label ID="dispBalance" runat="server"></asp:Label>
                                        </th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td class="style1">
                                            Auditorium Rent
                                        </td>
                                        <td class="style2">
                                            <asp:Label ID="dispRent" runat="server"></asp:Label>
                                        </td>
                                        <td>
                                            <asp:Label ID="Label2" runat="server"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Dining Hall Rent
                                        </td>
                                        <td class="style2">
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Kathir Mandapam
                                        </td>
                                        <td class="style2">
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Tables and chairs
                                        </td>
                                        <td class="style2">
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Electricity charge for water
                                        </td>
                                        <td class="style2">
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Luxuary Tax
                                        </td>
                                        <td class="style2">
                                            <asp:Label ID="dispLTax" runat="server"></asp:Label>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Central Service Tax
                                        </td>
                                        <td class="style2">
                                            <asp:Label ID="dispCTax" runat="server"></asp:Label>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                      <%--  <p class="amount-word">
                            Amount in Word: <span>
                                <asp:Label ID="dispAmountWord" runat="server"></asp:Label></span>
                        </p>--%>
                    </div>
                     <input type="button" onclick="PrintDiv()" value="Print" />
                </div>
1
  • You should consider reformatting the code blocks ... Commented Jun 28, 2014 at 11:15

1 Answer 1

1

In your javascript you are searching for the div with id widget-content

your code: var divToPrint = document.getElementById('widget-content');

but in your html you have <div class="widget-content"> and it has no id, it only has a class.

So you have 2 options.

OPTION 1

Change class to id


OPTION 2

Change your javascript to search for the class like so

var divToPrint = document.getElementsByClassName('widget-content')

NOTE: this will return an array of elements with that class, whether theres only one or more.

So in order to select the one you want; assuming there is only 1 div with this class you do like so:

var divToPrint = document.getElementsByClassName('widget-content')[0]
Sign up to request clarification or add additional context in comments.

1 Comment

Similar problem here.. My print content in Panel not in div. There is no error but unable to print.. suggest me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.