Is it Possible to Print elements in a div tag in HTML/Javascript ?

Question

0.00/5 (No votes)

See more:

Hi All,

I have got project that I am working on that requires a print function. This print function basically just prints a form with all the data that is filled up. I am aware of the

HTML

onclick="window.print()

but this function prints out the entire page , more like a print print preview.

Is there any way I can focus and print the form in html/javascript? or is possible to specify and just print code elements that are contained in a div tag??

XML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>

  <div> //can some how specify to only print elements in this div??
    <label> First Name:</label>
    <input type="text"> <br>
    <label> Last Name: </label>
    <input type="text">
     </div> // up to here...

    <button onclick="window.print()" > Print </button> //onlick here prints the whole page, which is not what i am looking for.

  </body>


</html>

Thank you for your help in advance.

Posted 9-Sep-14 22:24pm

1Future

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-09-10T00:02:00

Solution 1

Refer - Printing content of a particular div[^].

Logic is to open that div in another window and then print. That's it.

Posted 10-Sep-14 0:02am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Sooraj_Singh · Accepted Answer · 2014-09-10T01:23:00

You can achieve this using the jquery Library

jquery Library

and

Jquery Plugin

Write this....

ASP.NET

<head>
    <title>Invoice</title>
    <script src="AdminPanel/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.PrintArea.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#print_button").click(function () {
                $(".PrintArea").printArea();
            });
        });
     </script>
</head>
<body>
    <form id="form1"  runat="server">

    
	<div class="PrintArea">
				
	
	</div>		
	
	
</form></body>