Menu
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.
922
JavaScript Code: You can use this function for print a specific area of web page or full web page content. Use printPageArea() function on onclick event of print button element and provide the content area div ID which you want to print.
Drag a rectangle around the area you want to print. Choose File > Print. Make sure that the Selected Graphic option is selected in the Print Range area of the Print dialog box. (Optional) To enlarge the selected text or graphic to fit the sheet of paper, choose Fit To Printable Area from the Page Scaling pop-up menu.
JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript. The only exception is that you can call the window.print() method in the browser to print the content of the current window.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
