Angular silent printing guide

Prerequisites

• Install and run the Web Print Expert client
• Run npm install web-print-pdf

Architecture

Component → Angular service → printHtml → local WebSocket client. See window.print alternative.

Angular service example

Create an injectable print service and call from components:

import { Injectable } from '@angular/core';
import webPrintPdf from 'web-print-pdf';

@Injectable({ providedIn: 'root' })
export class SilentPrintService {
  async printHtml(html: string) {
    return webPrintPdf.printHtml(
      html,
      { paperFormat: 'A4', printBackground: true },
      { paperFormat: 'A4', printerName: '默认打印机' }
    );
  }
}

@Component({
  template: `
    <button (click)="onPrint()" [disabled]="loading">
      {{ loading ? '打印中…' : '静默打印' }}
    </button>
  `
})
export class ReportPrintComponent {
  loading = false;
  constructor(private print: SilentPrintService) {}
  async onPrint() {
    this.loading = true;
    try {
      await this.print.printHtml(document.getElementById('report')!.innerHTML);
    } finally {
      this.loading = false;
    }
  }
}

Tips

• No special angular.json config—run print logic in the browser only, not during SSR.
• Angular Material tables: use @ViewChild on the table wrapper or a print-only template.
• Preflight with getConnectStatus(); see error handling.
• Works with NgRx/RxJS—call printHtml from click handlers or <code>firstValueFrom</code>.

Common Angular Material table print pitfalls

Printing MatTable often pulls paginator, sort headers, or sidenav chrome onto paper.

How this page fits with related guides