Print specific part of webpage

Question

I m trying to print a specific part of my application   The application has a list of users  displaying their first and last name  When I click a user I get a popup with more detailed information about them    How would I go about printing just the popup for a user I clicked  The popup looks like this     lt div id  user lt    user- gt id   gt   class  popup  gt         lt div class  details  gt             User details           lt  div gt         lt a href   print  gt Print lt  a gt    lt  div gt    The print button isn t working yet though

User · Answer

I Got a better option   First separate the printable and nonprintable section by class name or id   x000D   x000D  window onafterprint   onAfterPrint  x000D   x000D  function print    x000D      hide the nonPrintable div   x000D    x000D   x000D  function onAfterPrint    x000D       Visible the nonPrintable div x000D    x000D   lt input type  button  onclick  print    value  Print   gt  x000D   x000D   x000D    That s all

User · Answer

I wrote a tiny JavaScript module called PrintElements for dynamically printing parts of a webpage   It works by iterating through selected node elements  and for each node  it traverses up the DOM tree until the BODY element  At each level  including the initial one  which is the to-be-printed node   s level   it attaches a marker class  pe-preserve-print  to the current node  Then attaches another marker class  pe-no-print  to all siblings of the current node  but only if there is no pe-preserve-print class on them  As a third act  it also attaches another class to preserved ancestor elements pe-preserve-ancestor   A dead-simple supplementary print-only css will hide and show respective elements  Some benefits of this approach is that all styles are preserved  it does not open a new window  there is no need to move around a lot of DOM elements  and generally it is non-invasive with your original document   See the demo  or read the related article for further details

User · Answer

Try this awesome ink-html library  import print from  ink-html     const print   require  ink-html   default     js print window querySelector   printable       Vue js print this  refs printable  el

User · Answer

Just use CSS to hide the content you do not want printed  When the user selects print - the page will look to the   media  print  CSS for instructions about the layout of the page   The media  print  CSS has instructions to hide the content that we do not want printed    lt  -- CSS for the things we want to print  print view  -- gt   lt style type  text css  media  print  gt    SCREEN VIEW CONTAINER          display  none         other print layout          background-color  FFF         lt  style gt    lt  -- CSS for the things we DO NOT want to print  web view  -- gt   lt style type  text css  media  screen  gt       PRINT VIEW        display  none        other web layout          background-color  E0E0E0         lt  style gt       lt div id  SCREEN VIEW CONTAINER  gt       the stuff I DO NOT want printed is here and will be hidden -       and not printed when the user selects print   lt  div gt    lt div id  PRINT VIEW  gt       the stuff I DO want printed is here   lt  div gt

User · Answer

Here is my enhanced version that when we want to load css files or there are image references in the part to print   In these cases  we have to wait until the css files or the images are fully loaded before calling the print   function  Therefor  we d better to move the print   and close   function calls into the html  Following is the code example   var prtContent   document getElementById  order-to-print    var WinPrint   window open          left 0 top 0 width 384 height 900 toolbar 0 scrollbars 0 status 0    WinPrint document write   lt html gt  lt head gt     WinPrint document write   lt link rel  stylesheet  href  assets css print normalize css  gt     WinPrint document write   lt link rel  stylesheet  href  assets css print receipt css  gt     WinPrint document write   lt  head gt  lt body onload  print   close     gt     WinPrint document write prtContent innerHTML   WinPrint document write   lt  body gt  lt  html gt     WinPrint document close    WinPrint focus

User · Answer

Styles    media print            no-print                 display   none  important                                      Jquery      function printInvoice           printDiv     printDiv      id of the div you want to print             addClass  no-print           printDiv       removeClass  no-print           printDiv  removeClass  no-print          parent      printDiv  parent         while   parent  length                    parent  removeClass  no-print             parent      parent  parent                window print          Print Button Html   lt input type  button  onclick  printInvoice     value  Print  gt

User · Answer

Try this   Dump the innerHTML of the container into the iFrame  plus any print-specific CSS print the iFrame contents   Try it out in JSFiddle  iframes don t appear to work in StackOverflow s preview  You can see the code here  but it won t work due to what are probably security limitations in StackOverflow s renderer   x000D   x000D  const printButton   document getElementById  print-button     printButton addEventListener  click   event   gt         build the new HTML page   const content   document getElementById  name-card   innerHTML    const printHtml     lt html gt         lt head gt             lt meta charset  utf-8  gt             lt title gt Name Card lt  title gt         lt  head gt         lt body gt   content  lt  body gt     lt  html gt                get the iframe   let iFrame   document getElementById  print-iframe            set the iFrame contents and print   iFrame contentDocument body innerHTML   printHtml    iFrame focus        iFrame contentWindow print           x000D   lt h1 gt Print your name badge lt  h1 gt   lt div id  name-card  class  card  gt     lt p gt Hello my name is lt  p gt     lt h2 gt Max Powers lt  h2 gt   lt  div gt   lt p gt You will be required to wear your name badge at all times lt  p gt   lt a id  print-button  class  btn btn-primary  gt Print lt  a gt    lt iframe id  print-iframe  width  0  height  0  gt  lt  iframe gt  x000D   x000D   x000D

User · Answer

Here what worked for me  With jQuery and https   developer mozilla org en-US docs Web API Window open    var  linkToOpenPrintDialog       tvcPrintThisLinkId      var windowObjectReference   null    var windowFeatures    left 0 top 0 width 800 height 900 menubar no toolbar no location yes resizable no scrollbars no status no     var windowFeaturesStyles     lt link rel  stylesheet  media  print  href   wp-content themes salient-child dist css app-print css  gt        linkToOpenPrintDialog on  click   function event        openPrintDialog this href  this target   tvcInnerCalculatorDivId   event           return false           function openPrintDialog url  windowName  elementToOpen  event         var elementContent   document getElementById elementToOpen        if windowObjectReference    null    windowObjectReference closed           windowObjectReference   window open  url  windowName  windowFeatures         windowObjectReference document write windowFeaturesStyles         windowObjectReference document write elementContent innerHTML         windowObjectReference document close          windowObjectReference focus          windowObjectReference print          windowObjectReference close           else         windowObjectReference focus                event preventDefault          app-print css   media print       body        margin  0       color  black       background-color  white

User · Answer

You would have to open a new window or navigate to a new page  containing just the information you wish the user to be able to print  Javscript   function printInfo ele        var openWindow   window open      title    attributes        openWindow document write ele previousSibling innerHTML       openWindow document close        openWindow focus        openWindow print        openWindow close        HTML    lt div id        gt       lt div gt          content to print      lt  div gt  lt a href     onclick  printInfo this   gt Print lt  a gt   lt  div gt    A few notes here  the anchor must NOT have whitespace between it and the div containing the content to print

User · Answer

In printPageArea   function  pass the specific div ID which you want to print  I ve found this JavaScript code from codexworld com   function printPageArea areaID       var printContent   document getElementById areaID       var WinPrint   window open          width 900 height 650        WinPrint document write printContent innerHTML       WinPrint document close        WinPrint focus        WinPrint print        WinPrint close        The complete code and tutorial can be found from here - How to Print Page Area using JavaScript

User · Answer

I made this jQuery extension to print the HTML of the element selected      div2   print       fn extend       print  function             var frameName    printIframe           var doc   window frames frameName           if   doc                    lt iframe gt    hide   attr  name   frameName  appendTo document body               doc   window frames frameName                     doc document body innerHTML   this html            doc window print            return this              See it in action here

User · Answer

You can use simple JavaScript to print a specific div from a page   var prtContent   document getElementById  your div id    var WinPrint   window open          left 0 top 0 width 800 height 900 toolbar 0 scrollbars 0 status 0    WinPrint document write prtContent innerHTML   WinPrint document close    WinPrint focus    WinPrint print    WinPrint close

User · Answer

try this one  export function printSectionOfWebpage sectionSelector        const  body   jquery  body        const  sectionToPrint   jquery sectionSelector       const  sectionToPrintParent    sectionToPrint parent        const  printContainer   jquery   lt div style  quot position relative  quot  gt           printContainer height  sectionToPrint height    append  sectionToPrint  prependTo  body        const  content    body children   not  printContainer  not  script   detach                    Needed for those who use Bootstrap 3 x  because some of        its   media print  styles ain t play nicely when printing              const  patchedStyle   jquery   lt style media  quot print quot  gt             text                          img   max-width  none  important              a href  after   content   quot  quot                                  appendTo  head         window print          body prepend  content        sectionToPrintParent prepend  sectionToPrint         printContainer remove         patchedStyle remove

User · Answer

Instead of all the complicated JavaScript  you can actually achieve this with simple CSS  just use two CSS files  one for your normal screen display  and another for the display of ONLY the content you wish to print  In this latter file  hide everything you don t want printed  display only the pop up    Remember to define the media attribute of both CSS files    lt link rel  stylesheet  href  screen-css css  media  all    gt   lt link rel  stylesheet  href  print-css css  media  print    gt

User · Answer

As answered here  https   stackoverflow com a 1072151 421243  you can add the specific section to a hidden frame with Javascript  focus it  and print it

[javascript] Print specific part of webpage

Examples related to javascript

Examples related to html

Examples related to printing