90

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:

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

The print button isn't working yet though.

1

18 Answers 18

182

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();
8
  • 39
    Be careful if the div that you're printing with this code requires any CSS to render they way you want. If it does you'll have to make sure you add it to the page as well using WinPrint.document.write(cssLinkTag). Jan 11, 2014 at 4:57
  • What if I want to change the orientation?
    – Si8
    Feb 12, 2014 at 19:32
  • This does not work to print a div when the div contains data obtained from the server side:stackoverflow.com/questions/34206638/… Dec 11, 2015 at 12:58
  • 9
    A fiddle based on this answer: jsfiddle.net/jdavidzapatab/6sctvg2z
    – David
    Aug 5, 2017 at 17:40
  • 1
    @WallyLawless could you provide an example of how you might derive the css tag?
    – karns
    May 29, 2020 at 20:30
16

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:

<div id="....">
    <div>
        content to print
    </div><a href="#" onclick="printInfo(this)">Print</a>
</div>

A few notes here: the anchor must NOT have whitespace between it and the div containing the content to print

2
  • This is brilliant! Of course if you don't want the print link after your item, or you'd like it to be a bit prettier, you have some challenges. I solved that challenge by giving the href an ID, changing Print to non breaking space, and referencing the click() event elsewhere with getElementById. Thank you!!
    – Mmm
    Aug 23, 2015 at 1:16
  • ah finally after trying a trillion html-to-pdf solutions from angular/typescript, a simple one that works
    – hocikto
    Dec 7, 2021 at 18:38
15

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) {
            $('<iframe>').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.

3
  • Doesn't work for me with Chrome. Also you should try to post your code here in the answer.
    – Mike
    Oct 13, 2016 at 14:32
  • 9
    I think that, instead of wildly downvoting someone who's posted an easy salvageable answer, we as a community may in fact try to not scare them off by commenting and just copying the damn code over ourselves v_v Don't expect everyone to be so familar with the intricacies of StackOverflow etiquette...
    – fresskoma
    Oct 13, 2016 at 16:30
  • Thanks but why css files cant be added?
    – Hamid Reza
    Aug 7, 2017 at 7:24
13

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:

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
1
  • 1
    I make the complicated JavaScript because I have more that 1 button to select the area to print. I use the css "@media print {" to hide the buttons. Oct 23, 2018 at 9:04
7

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.

<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">

#SCREEN_VIEW_CONTAINER{
        display: none;
    }
.other_print_layout{
        background-color:#FFF;
    }
</style>

<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">

   #PRINT_VIEW{
      display: none;
   }
.other_web_layout{
        background-color:#E0E0E0;
    }
</style>

<div id="SCREEN_VIEW_CONTAINER">
     the stuff I DO NOT want printed is here and will be hidden - 
     and not printed when the user selects print.
</div>

<div id="PRINT_VIEW">
     the stuff I DO want printed is here.
</div>
1
  • 1
    This works well - and is so easy and clear - thanks ! :)
    – TV-C-1-5
    Jan 12, 2018 at 22:41
3

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('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();
3

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

<input type="button" onclick="printInvoice();" value="Print">
2

Try this:

  1. Dump the innerHTML of the container into the iFrame (plus any print-specific CSS
  2. 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.

const printButton = document.getElementById('print-button');

printButton.addEventListener('click', event => {
  // build the new HTML page
  const content = document.getElementById('name-card').innerHTML;
  const printHtml = `<html>
      <head>
          <meta charset="utf-8">
          <title>Name Card</title>
      </head>
      <body>${content}</body>
  </html>`;
      
  // 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();
  
});
<h1>Print your name badge</h1>
<div id="name-card" class="card">
  <p>Hello my name is</p>
  <h2>Max Powers</h2>
</div>
<p>You will be required to wear your name badge at all times</p>
<a id="print-button" class="btn btn-primary">Print</a>

<iframe id="print-iframe" width="0" height="0"></iframe>

2

You can use this JQuery plugin

1
1

I Got a better option,

First separate the printable and nonprintable section by class name or id

window.onafterprint = onAfterPrint;

function print(){
  //hide the nonPrintable div  
}

function onAfterPrint(){
  // Visible the nonPrintable div
}
<input type="button" onclick="print()" value="Print"/>

That's all

1
  • I wouldn't say better, and you should definetely share a tiny example. But this looks like a really nice way of doing it. There could be a .printable class for instance. However, this would mess with the CSS (fixed positions for instance).
    – Ulysse BN
    Jan 17, 2019 at 13:47
1

try this one.

export function printSectionOfWebpage(sectionSelector) {
    const $body = jquery('body');
    const $sectionToPrint = jquery(sectionSelector);
    const $sectionToPrintParent = $sectionToPrint.parent();
    const $printContainer = jquery('<div style="position:relative;">');

    $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('<style media="print">')
        .text(
            `
          img { max-width: none !important; }
          a[href]:after { content: ""; }
        `
        )
        .appendTo('head');

    window.print();

    $body.prepend($content);
    $sectionToPrintParent.prepend($sectionToPrint);

    $printContainer.remove();
    $patchedStyle.remove();
}
1
  • Please explain your code. This will help others understand what you did.
    – Banana
    Sep 5, 2020 at 9:38
0

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.

1
  • That is with javascript
    – TV-C-1-5
    Jan 12, 2018 at 22:44
0

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.

1
  • Didn't work for me. Printed junk. I was trying to print a popup. Oct 14, 2021 at 13:02
0

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 = '<link rel="stylesheet" media="print" href="/wp-content/themes/salient-child/dist/css/app-print.css">';

  $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;
  } 

}
0

If there are a lot of css dependencies, the solutions above become difficult to use. If you

  • don't mind using a 3rd party library (html2canvas)
  • don't mind that all @media print css rules will be ignored (can be worked around)

you can try a slightly modified approach of @pmtamal 's answer.

  • Convert the html content in the target div to canvas
  • Open a new window and attach the canvas to that window
  • Print

Code Example:

let prtContent = document.querySelector(target);

html2canvas(prtContent).then(canvas => {
   let WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
   WinPrint.document.body.appendChild(canvas);
   WinPrint.document.close();
   WinPrint.focus();
   WinPrint.print();
   WinPrint.close();

});

0

This answer covers printing one "specific part" of multiple "specific parts" on page.

Steps:

  1. Place your "specific part" in a section (some kind of container). Each section should have a button with a value matching the ID of the section.
  2. Style the section as needed you want in to appear on print. (basiclly it's how it appears in the browser window).
  3. Create @media print rules.
  4. Create javascript js function.

Example:

html:

<container>
<button type="button" onclick="print(this.value)" value="1">Print</button>
<section id="1">
...."specific part" that will be printed
</section>
</container>

<container>
<button type="button" onclick="print(this.value)" value="2">Print</button>
<section id="2">
...."specific part" that will be printed
</section>
</container>

<container>
<button type="button" onclick="print(this.value)" value="3">Print</button>
<section id="3">
...."specific part" that will be printed
</section>
</container>

<container>
<button type="button" onclick="print(this.value)" value="4">Print</button>
<section id="4">
...."specific part" that will be printed
</section>
</container>

css: // note here #PrintThis can be whatever ID you want.

@media print {
  body * {
    visibility: hidden;
  }
  #printThis, #printThis * {
    visibility: visible;
  }
  #printThis {
    position: absolute;
    left: 0;
    top: 0;
  }
}

js:

function print(sectionID) {
// get the ID of the section to be printed
    let section = document.getElementById(sectionID)
// set the ID of the section to match CSS @media print rules
    section.setAttribute("id", "printThis")
// print the section
    window.print();
// set back the ID of the section to what it was...
    section.setAttribute("id", sectionID)
}
-1

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.

-1

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.