print-host

A lightweight, framework-friendly Angular utility for reliable, paginated printing using an isolated iframe.

print-host solves common browser printing problems:

• Phantom blank pages
• Inconsistent pagination
• Missing styles, fonts, or images
• Print CSS bleeding into the main app
• Unreliable window.print() behavior

It works by cloning a DOM subtree into a hidden iframe, injecting styles deterministically, paginating content in pixels (not guesses), and printing cleanly.

Features

• ✅ Iframe-isolated printing (no app CSS pollution)
• ✅ Deterministic pagination for A4
• ✅ Page-break control via CSS selectors
• ✅ Multiple style injection strategies
• ✅ Font & image readiness before printing
• ✅ Standalone Angular directive
• ✅ Safe DOM cloning (no innerHTML)

Installation

npm install @amplo/print-host

Basic Usage

<div printHost #ph="printHost">
  <div class="print-content">
    <!-- printable content -->
  </div>
</div>

<button (click)="ph.print()">Print</button>

Defaults

• First child of the host is printed
• A4 paper size
• 10mm margins
• Pagination enabled
• Host styles copied into the iframe

Directive Inputs

Core Options

| Input | Default | Description | | --------------------- | --------------- | ------------------------------------ | | printRoot | — | HTMLElement or ElementRef to print | | printSelector | — | Selector inside host to print | | pageMarginMm | 10 | A4 page margin in millimeters | | paginate | true | Enable cursor-based pagination | | extraCss | '' | Additional print-only CSS | | breakBeforeSelector | .break-before | Selector forcing page breaks |

Style Injection

Control how styles are injected into the iframe.

Built-in Modes

<div printHost styleInjectorKey="copy"></div>
<div printHost styleInjectorKey="links"></div>
<div printHost styleInjectorKey="none"></div>

| Mode | Description | | ------- | ------------------------------------- | | copy | Copy <link> and <style> from host | | links | Copy only stylesheet links | | none | No styles injected |

Custom Style Injectors

Register custom injectors globally:

import { providePrintHost } from "print-host";
import { InlineCssInjector } from "print-host/style";

bootstrapApplication(AppComponent, {
  providers: [
    providePrintHost({
      styleInjectors: [
        new InlineCssInjector("print", {
          href: "assets/print.css",
          cache: true,
        }),
      ],
    }),
  ],
});

Select the injector by key:

<div printHost styleInjectorKey="print"></div>

Page Breaks

Force a Page Break Before an Element

<div class="break-before"></div>

Custom Break Selector

<div printHost breakBeforeSelector=".force-break"></div>

Events

<div printHost (printStarted)="onPrintStart()" (printFinished)="onPrintEnd()"></div>

Typical use cases:

• Showing / hiding loaders
• Locking UI during print
• Logging print lifecycle events

How Pagination Works

• Measures real element heights using getBoundingClientRect
• Converts A4 height using measured px/mm
• Inserts page breaks only when required
• Avoids tiny dangling content at page bottoms
• Removes consecutive and trailing breaks automatically

This avoids browser heuristics and provides consistent results across Chrome and Edge.

Safety & Stability

print-host intentionally avoids:

• innerHTML
• Arbitrary HTML injection
• Mutating the original DOM

All content is cloned, sanitized, and printed in isolation inside an iframe.

When to Use

• Reports
• Invoices
• Dashboards
• Admin exports
• Any layout where print fidelity matters

When Not to Use

• Simple one-page text printing
• Cases where browser default printing is sufficient

License

MIT