Question

95

How do I print part of a rendered HTML page in JavaScript?

rated 0 times [ 98] [ 3] / answers: 1 / hits: 154336 / 15 Years ago, thu, july 2, 2009, 12:00:00

The JavaScript code window.print() can print the current HTML page.

If I have a div in an HTML page (for example, a page rendered from an ASP.NET MVC view), then I want to print the div only.

Is there any jQuery unobtrusive JavaScript or normal JavaScript code to implement this request?

Making it more clear, suppose the rendered HTML page is like:

<html xmlns=http://www.w3.org/1999/xhtml>



    <head id=Head runat=server>

        <title>

            <asp:ContentPlaceHolder runat=server ID=TitleContent />

        </title>

    </head>



    <body>

            <div id=div1 class=div1>....</div>

            <div id=div2 class=div2>....</div>

            <div id=div3 class=div3>....</div>

            <div id=div4 class=div4>....</div>

            <div id=div4 class=div4>....</div>

        <p>

            <input id=btnSubmit type=submit value=Print onclick=divPrint(); />

        </p>

    </body>

</html>

Then I want to click on the Print button, only printing div3.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shekinah

Add To Favorites

Follow

Total Points: 699

Total Questions: 112

Total Answers: 110

Location: Philippines

Member since Sat, Jul 11, 2020

3 Years ago

shekinah questions

1 Vite.js (Vue): Unwanted Page Reload Happens Only On Samsung Internet

Mon, Feb 7, 22, 00:00, 2 Years ago

1 How to export static images on Nextjs?

Mon, Dec 27, 21, 00:00, 2 Years ago

1 use effect run only when a state becomes false

Tue, Apr 6, 21, 00:00, 3 Years ago

1 Async await - does await block other code from running?

Mon, Dec 28, 20, 00:00, 3 Years ago

1 Passing props in React from one file to another

Fri, Oct 23, 20, 00:00, 3 Years ago

View All

answered 15 Years ago sabinal · Accepted Answer

I would go about it somewhat like this:

<html>

    <head>

        <title>Print Test Page</title>

        <script>

            printDivCSS = new String ('<link href=myprintstyle.css rel=stylesheet type=text/css>')

            function printDiv(divId) {

                window.frames[print_frame].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;

                window.frames[print_frame].window.focus();

                window.frames[print_frame].window.print();

            }

        </script>

    </head>



    <body>

        <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>

        <b>Div 1:</b> <a href=javascript:printDiv('div1')>Print</a><br>

        <div id=div1>This is the div1's print output</div>

        <br><br>

        <b>Div 2:</b> <a href=javascript:printDiv('div2')>Print</a><br>

        <div id=div2>This is the div2's print output</div>

        <br><br>

        <b>Div 3:</b> <a href=javascript:printDiv('div3')>Print</a><br>

        <div id=div3>This is the div3's print output</div>

        <iframe name=print_frame width=0 height=0 frameborder=0 src=about:blank></iframe>

    </body>

</html>