Partial Page Print Utility

Partial Page Print Utility

I created a client-side JavaScript utility to print specific sections of a webpage without printing the entire page. It uses an iframe to isolate the selected DOM element, injects custom CSS for print styling, and triggers the browser’s print dialog. This allows users to print targeted content like forms, tables, or articles, improving usability for long pages or content-heavy sites.

Problem / Context

Webpages often contain unnecessary elements (nav, ads, footers) when printing, leading to wasted paper and poor formatting. Browsers’ default print ignores CSS media queries sometimes, and users need a way to print only relevant sections (e.g., a receipt, a table, or an article excerpt) without server-side processing.

Constraints / Goals

  • Pure client-side: no server, works offline.
  • Flexible: print any element by ID.
  • Styled prints: include custom CSS for print media.
  • Simple integration: one function call.
  • Cross-browser: uses standard window.print().

Core Approach

The printDiv function clones the target element’s HTML, wraps it with print CSS, loads it into a hidden iframe, and calls print(). The iframe isolates the content, preventing full-page print.

The Print Function

function printDiv(elementId) {
    var a = document.getElementById('printing-css').value; // Get CSS
    var b = document.getElementById(elementId).innerHTML; // Get element HTML
    window.frames["print_frame"].document.title = document.title; // Set title
    window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b; // Inject
    window.frames["print_frame"].window.focus(); // Focus iframe
    window.frames["print_frame"].window.print(); // Print
}

CSS for Printing

A hidden textarea holds reset CSS for clean prints, including margins, fonts, and hiding non-print elements.

<textarea id="printing-css" style="display:none;">
html,body,div,span,... {margin:0;padding:0;border:0;font-size:100%;...}
body{font:normal normal .8125em/1.4 Arial,Sans-Serif;background-color:white;color:#333}
...
.no-print{display:none}
</textarea>

HTML Structure

Each printable section has a print link and is wrapped in a div with ID.

<div id="print-area-1" class="print-area">
    <div style="text-align:right;"><a class="no-print" href="javascript:printDiv('print-area-1');">Print</a></div>
    <h2>Lorem Ipsum</h2>
    <p>Content here.</p>
</div>

Hidden Iframe

<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>

Results / Impact

  • Users print only needed content, saving resources.
  • Useful for invoices, reports, or educational materials.
  • Easy to add to any page.

Trade-offs / Limitations

  • Iframe may not work in strict CSP environments.
  • CSS must be manually managed.
  • No advanced features like page breaks.

Next Steps

  • Add page break support.
  • Integrate with libraries like html2canvas for images.
  • Make CSS dynamic.

Tech Summary

JavaScript DOM manipulation, iframe for isolation, window.print().

Summary Pattern Example

Problem: Full-page prints waste paper on long sites.
Approach: Iframe injection of element HTML + CSS for targeted printing.
Result: Selective print utility for better web usability.

Portfolio javascriptdomprintingiframehtmlcssbrowser-api