August 8, 2019
How to Print a Specific Div or Element Using jQuery
If you looking for printing specific div or element using jQuery then you are in right place. Using third party jQuery set of codes here we did print specific element. Now you going to see printing selected div instead complete page, each and everyone has a specific requirement so based on that here we did print a specific element.
Using this jQuery.print.js plugin you can do various kind of activities example: iframe mode, hide specific content in print, custom stylesheet, print the element in a new window, global style enable and disable, debugging using console log and also you have a full-page print option. The following code will help to use in your projects.
If you like to export your DataTables in various format here you have an article.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 |
<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>How to Print a Specific Div or Element Using jQuery</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <br/> <br/> <h1 class="text-center">How to Print a Specific Div or Element Using jQuery </h1> <br/> <br/> <!-- Element Example 1 --> <div class="card"> <div class="card-body"> <h2>Element Example 1</h2> <h3>Print a Specific Div or Element and Hide the Print Button</h3> <hr/> <div id="element1"> <form action="/action_page.php"> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <br/> <!-- Print Button --> <button class="btn btn-primary active_print hide_content" onclick="jQuery('#element1').print()"> Print Element </button> </div> </div> <br/> <hr> <br/> <!-- Element Example 2 --> <div class="card"> <div class="card-body"> <h2>Element Example 2</h2> <h3>Print a Specific Div or Element and Hide the Unwanted Content in the Print</h3> <hr/> <div id="element2"> <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> <!-- Cant Print the Address --> <address class="hide_content"> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> </div> <!-- Print Button --> <button class="btn btn-primary active_print" onclick="jQuery.print('#element2')"> Print Element </button> </div> </div> <br/> <hr> <br/> <!-- Element Example 3 --> <div class="card"> <div class="card-body"> <h2>Element Example 3</h2> <h3>Print a Specific Div or Element in a New Window and Hide the Button</h3> <hr/> <div id="element3"> <h3 class='remove_me'>Element 4</h3> <p class="muted">Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p> <p class="text-warning">Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p> <p class="text-error">Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p> <p class="text-info">Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p> <p class="text-success">Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p> <!-- Print Button --> <button class="btn btn-primary active_print remove_me"> Print Element </button> </div> </div> </div> <br/> <hr> <br/> <!-- Full Page Print --> <div class="card hide_content"> <div class="card-body"> <h3>Print a Full Page and Hide the Button</h3> <hr/> <!-- Print Button --> <button class="btn btn-primary btn-lg active_print" onclick="jQuery.print()"> Print Full Page </button> </div> </div> <br/> <br/> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="print.js"></script> <script type='text/javascript'> jQuery(function($) { 'use strict'; $("#element3").find('button').on('click', function() { //Print Element Example 3 With Custom Options $("#element3").print({ //Apply Global styles globalStyles: false, //Add link with attrbute media=print mediaPrint: false, //Add Custom stylesheet stylesheet: "https://fonts.googleapis.com/css?family=Roboto", //Print in a hidden iframe iframe: false, //Hide from Print noPrintSelector: ".remove_me", //Log to console when printing is done via a deffered callback deferred: $.Deferred().done(function() { console.log('Printing done', arguments); }) }); }); }); </script> </body> </html> |
