Print specific part of webpage

web-development

responsive-design

performance

best-practices

byAnton Shumikhin·Nov 26, 2024

The code snippet below is the fast lane to printing a specific section of your webpage with JavaScript:

// Nobody likes long introductions, so let's cut to the chase and print!
function printSection(sectionId) {
  var sectionContent = document.getElementById(sectionId).innerHTML;
  var popupWin = window.open('', '_blank', 'width=600,height=600');
  
  // Time to open the letter. No, not a love letter, our document!
  popupWin.document.open();
  
  // Writing the love letter, ahem, document.
  popupWin.document.write('<html><body onload="window.print()">' + sectionContent + '</html>');
  
  // No more writing – you're not Shakespeare after all.
  popupWin.document.close();
}

That's it. Just call printSection('idOfSectionToPrint'), providing the element's ID you're eager to print. Here you go, a brand-new popup and a ride to the print dialog!

Beefed-up mode: Print with extras

While the code above is the bread and butter of printing, let's step things up a notch with some extra tricks.

Dress it up with CSS media queries

To ensure that the print view matches the tie and pocket square your content is donning (no pun intended!), it's a good idea to use @media print to define styles specifically for printed content:

// Print mode: Łągniewski's Hide & Seek Champion 2022
@media print {
  body * {
    visibility: hidden;
  }
  #idOfSectionToPrint, #idOfSectionToPrint * {
    visibility: visible;
  }
  #idOfSectionToPrint {
    position: absolute;
    left: 0;
    top: 0;
  }
}

// CSS File: "You didn't spot us earlier, right?"

Get in the groove with jQuery

If you're using jQuery on your project, make things a bit smoother by simplifying the printing process:

// Printing in the 21st century means touch and go!
$('#printButton').click(function() {
  var content = $('#idOfSectionToPrint').html();
  var win = window.open('', 'printwindow');
  
  // Just as Captain Picard likes it: 'Make it so!'
  win.document.write('<html><head><title>Print</title></head><body>' + content + '</body></html>');
  win.document.close();
  win.print();
});

Taking care of dynamic content and cross-browser compatibility

Is your site as dynamic as a Broadway dancer? Ensure that the print function is triggered after all data is loaded for the smooth moves! Also, don't overlook cross-browser compatibility, as some users might face issues depending on their browser version.

The print nitty-gritty

Making Print Accessible

A good print button or link should be as easy to find as a cat at a tuna factory. Here's how you can take care of it:

<button onclick="printSection('idOfSectionToPrint')">Print Section</button>

Manoeuvring complex structures

Got a Picasso-like complex structure? Dynamically change the printable area by showing only the section to print temporarily.

Handling iframes

Trapped content in an iframe? You can still bring it out to the print world:

// Secret Agent 007 on a rescue mission!
function printIframeSection(iframeId, sectionId) {
  var iframe = document.getElementById(iframeId);
  var content = iframe.contentWindow.document.getElementById(sectionId).innerHTML;
  var popupWin = window.open('', '_blank', 'width=600,height=600');
  popupWin.document.write('<html><body onload="window.print()">' + content + '</body></html>');
  
  // Mission accomplished, agent! 
  popupWin.document.close();
}