In this tutorial, we are going to learn how to Print a Specific Area of the Web Page using jQuery. Many web page projects required to have a print function for the data. If you are looking for this kind of project then you are at the right place. We are going to provide a simple and easiest way to print a specific area of the web page. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

⚙ Live Demo

JavaScript

We are going to include all jQuery library. Copy and paste to your HEAD tag of your web page.

1. <script
   
   src
   
   =
   
   "jquery.js"
   
   type
   
   =
   
   "text/JavaScript"
   
   language
   
   =
   
   "javascript"
   
   ></
   
   script
   
   >
   
2. <script
   
   src
   
   =
   
   "jquery.PrintArea.js"
   
   type
   
   =
   
   "text/JavaScript"
   
   language
   
   =
   
   "javascript"
   
   ></
   
   script
   
   >
   

Simple Markup

This simple HTML source code contains a print button and the contents to be print.

1. <div
   
   class
   
   =
   
   "wrapper"
   
   style
   
   =
   
   "width: 1000px;border: solid 2px #333;padding: 10px;"
   
   >
   
2. <div
   
   style
   
   =
   
   "width: 1000px;float: left;"
   
   >
   
3. <a
   
   href
   
   =
   
   "javascript:void(0);"
   
   id
   
   =
   
   "print_Button_Main"
   
   style
   
   =
   
   "width: 100px; padding: 5px 8px 5px 8px;text-align: center; border:2px solid blue; float: left; background-color: azure;color: blue;text-decoration: none; margin: 10px;"
   
   >
   
   Print Full Page</
   
   a
   
   >
   
4. <a
   
   href
   
   =
   
   "javascript:void(0);"
   
   id
   
   =
   
   "print_Button_Full"
   
   style
   
   =
   
   "width: 130px; padding: 5px 8px 5px 8px;text-align: center; border:2px solid blue; float: left; background-color: azure;color: blue;text-decoration: none; margin: 10px;"
   
   >
   
   Print Main Content</
   
   a
   
   >
   
5. </
   
   div
   
   >
   
6. <div
   
   class
   
   =
   
   "header"
   
   style
   
   =
   
   "width: 950px;height: 80px;border: solid 2px #333;text-align: center; padding: 5px;margin:45px 20px 20px 20px;"
   
   >
   
7. <h1
   
   >
   
   Sourcecodester Header</
   
   h1
   
   >
   
8. </
   
   div
   
   >
   
9. <div
   
   class
   
   =
   
   "content"
   
   style
   
   =
   
   "width: 950px;height: 300px;border: solid 2px #333;text-align: center; padding: 5px;margin: 20px;"
   
   >
   
10. <h1
    
    >
    
    Welcome to <a
    
    href
    
    =
    
    "//sourcecodester.com/"
    
    target
    
    =
    
    "_new"
    
    ><b
    
    style
    
    =
    
    "color:blue;"
    
    >
    
    SourceCodester.com</
    
    b
    
    ></
    
    a
    
    >
    
    - The free source code</
    
    h1
    
    >
    
11. <div
    
    >
    
12. <img
    
    src
    
    =
    
    "1.png"
    
    style
    
    =
    
    "float: left;overflow: hidden;width: 200px;margin-right: 15px;margin-bottom: 8px;"
    
    >
    
13. <p
    
    style
    
    =
    
    "text-align: left;"
    
    >
    
14. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis urna nisl, vitae finibus massa fringilla vel.
    
15. Nulla nibh justo, semper in sollicitudin sed, imperdiet at lectus. Nam maximus venenatis diam, at lacinia sem dapibus quis.
    
16. Nam vel justo magna. Nullam eget luctus justo. Phasellus varius nisi in pretium malesuada. Praesent scelerisque enim ac erat
    
17. consectetur dignissim. Duis eu lacinia dui, eu volutpat dui. Nunc dignissim libero arcu, sed condimentum libero dignissim vitae.
    
18. Nulla eu ultricies justo, id venenatis mauris. Nam placerat mi eu ante ullamcorper cursus.
    
19. 
    
20. Ut tellus ante, pulvinar eleifend sapien id, lobortis congue mi. Duis non augue ut est pretium aliquam in eget orci.
    
21. Suspendisse rutrum et massa a ullamcorper. Ut dui lorem, sollicitudin a viverra sed, scelerisque nec tortor. Suspendisse
    
22. dictum cursus dolor sit amet tincidunt. Morbi egestas odio ante. Phasellus commodo scelerisque arcu, scelerisque condimentum
    
23. libero tempus ut. Sed pharetra eleifend metus nec porttitor. Nam pharetra nibh eget arcu condimentum tincidunt. Nulla justo ante,
    
24. ultricies a ultricies et, commodo eleifend lorem. Sed convallis erat quis ligula rhoncus imperdiet. Ut non dignissim diam, eget
    
25. bibendum neque. Maecenas pharetra risus sapien, finibus congue turpis maximus vel. Sed mauris metus, laoreet id sapien a, rutrum
    
26. dapibus est. Phasellus auctor dapibus ipsum, eget interdum quam porta volutpat.
    
27. </
    
    p
    
    >
    
28. </
    
    div
    
    >
    
29. </
    
    div
    
    >
    
30. <div
    
    class
    
    =
    
    "footer"
    
    style
    
    =
    
    "width: 950px;height: 80px;border: solid 2px #333;text-align: center; padding: 5px;margin: 20px;"
    
    >
    
31. <h1
    
    >
    
    Sourcecodester Footer</
    
    h1
    
    >
    
32. </
    
    div
    
    >
    
33. </
    
    div
    
    >
    

Output

Print Full Page

Print Main Content


⚙ Live Demo

Hope that this simple yet useful tutorial that I created may help you to your future projects.

If you are interested in programming, we have an example of programs that may help you even just in small ways.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download