How do i print part of a page in javascript?

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:

 

      

           User details...
      
      Print
 

The print button isn't working yet though.

asked Oct 21, 2012 at 10:44

Gregor MenihGregor Menih

4,76514 gold badges44 silver badges64 bronze badges

1

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();

Mystical

2,1952 gold badges21 silver badges35 bronze badges

answered Oct 21, 2012 at 10:58

7

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:

    

        content to print
    
Print

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

answered Oct 21, 2012 at 10:56

SRejectSReject

3,5661 gold badge22 silver badges40 bronze badges

2

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

answered Aug 21, 2020 at 14:11

You can use this JQuery plugin

answered Sep 19, 2021 at 13:40

aphoeaphoe

2,36625 silver badges29 bronze badges

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
}

That's all

answered Jun 9, 2018 at 16:44

ArulArul

8169 silver badges21 bronze badges

1

try this one.

export function printSectionOfWebpage(sectionSelector) {
    const $body = jquery('body');
    const $sectionToPrint = jquery(sectionSelector);
    const $sectionToPrintParent = $sectionToPrint.parent();
    const $printContainer = jquery('
');

    $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('