How do I print part of a rendered HTML page in JavaScript

Question

The JavaScript code window print   can print the current HTML page   If I have a div in an HTML page  for example  a page rendered from an ASP NET MVC view   then I want to print the div only   Is there any jQuery unobtrusive JavaScript or normal JavaScript code to implement this request   Making it more clear  suppose the rendered HTML page is like    lt html xmlns  http   www w3 org 1999 xhtml  gt        lt head id  Head  runat  server  gt           lt title gt               lt asp ContentPlaceHolder runat  server  ID  TitleContent    gt           lt  title gt       lt  head gt        lt body gt               lt div id  div1  class  div1  gt      lt  div gt               lt div id  div2  class  div2  gt      lt  div gt               lt div id  div3  class  div3  gt      lt  div gt               lt div id  div4  class  div4  gt      lt  div gt               lt div id  div4  class  div4  gt      lt  div gt           lt p gt               lt input id  btnSubmit  type  submit  value  Print  onclick  divPrint       gt           lt  p gt       lt  body gt   lt  html gt    Then I want to click on the Print button  only printing div3

User · Answer

lt div id  invocieContainer  gt       lt div class  row  gt             Your html Page content here          lt  div gt   lt  div gt    lt script src   Scripts printThis js  gt  lt  script gt   lt script gt        document  on  click     btnPrint   function e            e preventDefault            e stopPropagation                invocieContainer   printThis               debug  false     show the iframe for debugging             importCSS  true     import page CSS             importStyle  true     import style tags             printContainer  true     grab outer container as well as the contents of the selector             loadCSS    Content bootstrap min css      path to additional css file - us an array    for multiple             pageTitle         add title to print page             removeInline  false     remove all inline styles from print elements             printDelay  333     variable print delay  depending on complexity a higher value may be necessary             header  null     prefix to html             formValues  true    preserve input form values                       lt  script gt       For printThis js souce code  copy and pase below URL in new tab        https   raw githubusercontent com jasonday printThis master printThis js

User · Answer

Along the same lines as some of the suggestions you would need to do at least the following    Load some CSS dynamically through JavaScript  Craft some print-specific CSS rules Apply your fancy CSS rules through JavaScript   An example CSS could be as simple as this    media print     body         display none         body  printable       display block          Your JavaScript would then only need to apply the  printable  class to your target div and it will be the only thing visible  as long as there are no other conflicting CSS rules -- a separate exercise  when printing happens    lt script type  text javascript  gt    function divPrint            Some logic determines which div should be printed           This example uses div3          div3   addClass  printable        window print         lt  script gt    You may want to optionally remove the class from the target after printing has occurred  and   or remove the dynamically-added CSS after printing has occurred    Below is a full working example  the only difference is that the print CSS is not loaded dynamically  If you want it to really be unobtrusive then you will need to load the CSS dynamically like in this answer    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt     lt head gt       lt meta http-equiv  content-type  content  text html  charset UTF-8    gt       lt title gt Print Portion Example lt  title gt       lt style type  text css  gt         media print           body               display none                     body  printable             display block                         lt  style gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt     lt  head gt      lt body gt       lt h1 gt Print Section Example lt  h1 gt       lt div id  div1  gt Div 1 lt  div gt       lt div id  div2  gt Div 2 lt  div gt       lt div id  div3  gt Div 3 lt  div gt       lt div id  div4  gt Div 4 lt  div gt       lt div id  div5  gt Div 5 lt  div gt       lt div id  div6  gt Div 6 lt  div gt       lt p gt  lt input id  btnSubmit  type  submit  value  Print  onclick  divPrint       gt  lt  p gt       lt script type  text javascript  gt        function divPrint                Some logic determines which div should be printed               This example uses div3              div3   addClass  printable            window print                 lt  script gt     lt  body gt   lt  html gt

User · Answer

I would go about it somewhat like this    lt html gt       lt head gt           lt title gt Print Test Page lt  title gt           lt script gt              printDivCSS   new String    lt link href  myprintstyle css  rel  stylesheet  type  text css  gt                function printDiv divId                    window frames  print frame   document body innerHTML printDivCSS   document getElementById divId  innerHTML                  window frames  print frame   window focus                    window frames  print frame   window print                           lt  script gt       lt  head gt        lt body gt           lt h1 gt  lt b gt  lt center gt This is a test page for printing lt  center gt  lt  b gt  lt hr color  00cc00 width 95  gt  lt  h1 gt           lt b gt Div 1  lt  b gt   lt a href  javascript printDiv  div1    gt Print lt  a gt  lt br gt           lt div id  div1  gt This is the div1 s print output lt  div gt           lt br gt  lt br gt           lt b gt Div 2  lt  b gt   lt a href  javascript printDiv  div2    gt Print lt  a gt  lt br gt           lt div id  div2  gt This is the div2 s print output lt  div gt           lt br gt  lt br gt           lt b gt Div 3  lt  b gt   lt a href  javascript printDiv  div3    gt Print lt  a gt  lt br gt           lt div id  div3  gt This is the div3 s print output lt  div gt           lt iframe name  print frame  width  0  height  0  frameborder  0  src  about blank  gt  lt  iframe gt       lt  body gt   lt  html gt

User · Answer

Try this JavaScript code   function printout          var newWindow   window open        newWindow document write document getElementById  output   innerHTML       newWindow print

User · Answer

You could use a print stylesheet  but this will affect all print functions   You could try having a print stylesheet externalally  and it is included via JavaScript when a button is pressed  and then call window print    then after that remove it

[javascript] How do I print part of a rendered HTML page in JavaScript?

Examples related to javascript

Examples related to jquery