Print DIV content by JQuery

Question

suppose i have many div s in my page but i want to print the content of specific div using jquery  i found there is a plugin for that   jQuery Print Element  using this plugin we can easily print div content like below      SelectorToPrint   printElement      but what happen if my div is hidden in page  so then does it work  this plugin can print the content of hidden div   what happen if printer is not attach with client machine  i want to show message if printer is not there to customer that  Printer not found   how to handle this situation  so please advise me what would be the best approach to print the content of hidden div in page and as well as handle printer issue if printer is not attached   thanks

User · Accepted Answer

your question doesn t sound as if you even tried it yourself  so i shouldn t even think of answering  but  if a hidden div can t be printed with that one line      SelectorToPrint   printElement      simply change it to      SelectorToPrint   show   printElement      which should make it work in all cases   for the rest  there s no solution  the plugin will open the print-dialog for you where the user has to choose his printer  you simply can t find out if a printer is attached with javascript  and you  almost  can t print without print-dialog - if you re thinking about that    NOTE        The   browser object has been removed in version 1 9 x of jQuery   making this library unsupported

User · Answer

You can follow these steps     wrap the div you want to print into another div  set the wrapper div display status to none in css  keep the div you want to print display status as block  anyway it will be hidden as its parent is hidden  simply call    SelectorToPrint   printElement

User · Answer

There is a way to use this with a hidden div but you have to work abit more with the printElement   function and css   Css    SelectorToPrint       display  none      Script         SelectorToPrint   printElement   printBodyOptions  styleToAdd  padding 10px margin 10px display block   classNameToAdd  WhatYouWant       This will override the display  none in the new window you open and the content will be displayed on the print-preview page and the div on you site remains hidden

User · Answer

I prefer this one  I have tested it and its working   https   github com jasonday printThis      mySelector   printThis      or      mySelector   printThis          debug  false                 show the iframe for debugging        importCSS  true              import page CSS        printContainer  true         grab outer container as well as the contents of the selector        loadCSS   path to my css     path to additional css file        pageTitle                    add title to print page        removeInline  false          remove all inline styles from print elements

User · Answer

try this jquery library  jQuery Print Element  http   projects erikzaadi com jQueryPlugins jQuery printElement

User · Answer

Here is a JQuery amp JavaScript solutions to print div as it styles with internal and external css      document  ready function                     btnPrint   live  click   function        btnPrint is button which will trigger print                 var divContents       order summery   html     div which have to print                 var printWindow   window open          height 700 width 900                    printWindow document write   lt html gt  lt head gt  lt title gt  lt  title gt                     printWindow document write   lt link rel  stylesheet  href    netdna bootstrapcdn com bootstrap 3 1 0 css bootstrap min css   gt      external styles                 printWindow document write   lt link rel  stylesheet  href   css custom css  type  text css   gt                     printWindow document write   lt  head gt  lt body gt                     printWindow document write divContents                   printWindow document write   lt  body gt  lt  html gt                     printWindow document close                     printWindow onload function                    printWindow focus                                                             printWindow print                    printWindow close                                            This will print your div in new window   Button to trigger event   lt input type  button  id  btnPrint  value  Print This  gt

[javascript] Print DIV content by JQuery

Examples related to javascript

Examples related to jquery