ngx-print 22.0.0 → 22.1.0

package/projects/demo/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes)
+  ]
+};

package/projects/demo/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

package/projects/demo/src/app/demo.component.html

@@ -0,0 +1,83 @@
+<h1>Print Library Demo</h1>
+
+<p>
+  Fill out the form and draw on the canvas below, then click print.
+  The library will capture the current state of all fields and the canvas.
+</p>
+
+<form class="option-form" [formGroup]="optionForm">
+  <fieldset>
+    <legend>Print options:</legend>
+    <div class="form-group">
+      @for (method of printMethods; track method) {
+        <div>
+          <label>
+            <input [formControlName]="'printMethod'"
+                   [value]="method"
+                   type="radio"
+                   id="print-method-{{ $index }}"
+                   name="printMethod"
+            />
+            {{ method }}
+          </label>
+        </div>
+      }
+    </div>
+
+      <div class="form-group">
+        <label for="fullName">printTitle</label>
+        <input id="fullName" type="text" formControlName="printTitle" />
+      </div>
+
+    <div class="form-group">
+      <label>Checkbox (Input)</label>
+      <div>
+        <input type="checkbox" id="agree" formControlName="useExistingCss" />
+        <label for="agree" style="display:inline;">useExistingCss</label>
+      </div>
+    </div>
+  </fieldset>
+</form>
+
+<button type="button" (click)="onPrint()">Print Section</button>
+
+<!-- This is the section targeted by the ID -->
+<div id="print-demo-section" class="print-container">
+  <h3>printable-section</h3>
+
+  <form [formGroup]="demoform">
+    <div class="form-group">
+      <label for="fullName">Full Name (Input)</label>
+      <input id="fullName" type="text" formControlName="name" placeholder="Enter your name" />
+    </div>
+
+    <div class="form-group">
+      <label for="role">Role (Select)</label>
+      <select id="role" formControlName="role">
+        <option value="developer">Developer</option>
+        <option value="designer">Designer</option>
+        <option value="manager">Manager</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="bio">Biography (Textarea)</label>
+      <textarea id="bio" formControlName="bio" rows="4"></textarea>
+    </div>
+
+    <div class="form-group">
+      <label>Checkbox (Input)</label>
+      <div>
+        <input type="checkbox" id="agree" formControlName="agree" />
+        <label for="agree" style="display:inline;">I agree to the terms</label>
+      </div>
+    </div>
+  </form>
+
+  <div class="form-group">
+    <label>Signature / Drawing (Canvas)</label>
+    <canvas #drawingCanvas width="400" height="150"></canvas>
+  </div>
+
+  <p>Swedish: Åå, Japanese: ひらがな, Chinese: 你好, Korean: 안녕하세요</p>
+</div>

package/projects/demo/src/app/demo.component.scss

@@ -0,0 +1,54 @@
+:host {
+  display: block;
+  padding: 2rem;
+  font-family: sans-serif;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+}
+
+.option-form {
+  max-width: 600px;
+  margin-bottom: 2rem;
+}
+
+button {
+  padding: 0.75rem 1.5rem;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+
+  &:hover {
+    background: #0056b3;
+  }
+}
+
+.print-container {
+  border: 2px dashed #ccc;
+  padding: 2rem;
+  margin: 1rem 0;
+  max-width: 600px;
+
+  input,
+  select,
+  textarea {
+    width: 100%;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  canvas {
+    border: 1px solid #000;
+    background: #f0f0f0;
+  }
+}

package/projects/demo/src/app/demo.component.ts

@@ -0,0 +1,73 @@
+import { afterNextRender, Component, ElementRef, inject, viewChild } from '@angular/core';
+import { NgxPrintService } from '../../../../src/lib/ngx-print.service';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { PrintOptions } from '../../../../src/public_api';
+
+@Component({
+  selector: 'app-root',
+  imports: [ReactiveFormsModule],
+  templateUrl: './demo.component.html',
+  styleUrl: './demo.component.scss',
+})
+export class DemoComponent {
+  private _printService = inject(NgxPrintService);
+  private _fb = inject(FormBuilder);
+
+  protected readonly printMethods = ['iframe', 'window', 'tab'] as const;
+
+  canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('drawingCanvas');
+
+  optionForm = this._fb.group({
+    printMethod: this._fb.nonNullable.control<typeof PrintOptions.prototype.printMethod>('iframe'),
+    printTitle: this._fb.nonNullable.control<string>('Demo Component Print'),
+    useExistingCss: this._fb.nonNullable.control<boolean>(true),
+  });
+
+  demoform = this._fb.group({
+    name: ['Angular Developer'],
+    role: ['developer'],
+    bio: ['This text will be preserved in the print view.'],
+    agree: [true],
+  });
+
+  constructor() {
+    // Draw on canvas once it is ready (SSR safe)
+    afterNextRender(() => {
+      this.initCanvas();
+    });
+  }
+
+  onPrint() {
+    this._printService.print({
+      printSectionId: 'print-demo-section',
+      printTitle: this.optionForm.controls.printTitle.value!,
+      printMethod: this.optionForm.controls.printMethod.value,
+      useExistingCss: this.optionForm.controls.useExistingCss.value,
+    });
+  }
+
+  private initCanvas() {
+    const canvas = this.canvasRef().nativeElement;
+    const ctx = canvas.getContext('2d');
+
+    if (ctx) {
+      // Draw a background and some shapes to prove canvas printing works
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.beginPath();
+      ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+      ctx.moveTo(110, 75);
+      ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
+      ctx.moveTo(65, 65);
+      ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
+      ctx.moveTo(95, 65);
+      ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
+      ctx.stroke();
+
+      ctx.font = '20px Arial';
+      ctx.fillStyle = 'blue';
+      ctx.fillText('Canvas Content', 150, 85);
+    }
+  }
+}

package/projects/demo/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Demo</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/demo/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { DemoComponent } from './app/demo.component';
+
+bootstrapApplication(DemoComponent, appConfig).catch(err => console.error(err));

package/projects/demo/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/projects/demo/tsconfig.app.json

@@ -0,0 +1,19 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
+}

package/projects/demo/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}

package/src/lib/ngx-print.base.ts

@@ -0,0 +1,381 @@
+import { CSP_NONCE, DOCUMENT, inject, Service } from '@angular/core';
+import { Subject } from 'rxjs';
+import { PrintOptions } from './print-options';
+
+/** For example:
+ * {
+ *     'h2': { 'border': 'solid 1px' },
+ *     'h1': { 'color': 'red', 'border': '1px solid' },
+ *   */
+export type PrintStyle = Record<string, Record<string, string>>;
+
+/**
+ * Either a {@link PrintStyle} object, or a raw CSS string (e.g. `'h1 { color: red; }'`)
+ * to be injected into the print document's <style> tag as-is.
+ */
+export type PrintStyleInput = PrintStyle | string;
+
+@Service()
+export class PrintBase {
+  private document = inject(DOCUMENT);
+  private nonce = inject(CSP_NONCE, { optional: true });
+
+  private _iframeElement: HTMLIFrameElement | undefined;
+  private _printStyle: string[] = [];
+  private _styleSheetFile = '';
+  protected printComplete = new Subject<void>();
+
+  //#region Getters and Setters
+  /**
+   * Sets the print styles based on the provided values.
+   *
+   * @param values - Either a key-value pairs object representing print styles, or a raw CSS string.
+   * @protected
+   */
+  protected setPrintStyle(values: PrintStyleInput) {
+    if (typeof values === 'string') {
+      this._printStyle = values ? [values] : [];
+      return;
+    }
+
+    this._printStyle = [];
+    for (const [selector, declarations] of Object.entries(values)) {
+      // Built declaration-by-declaration (rather than via JSON.stringify + a quote-stripping
+      // regex) so that quotes and commas that are part of a CSS value (e.g. quoted font names,
+      // comma-separated font-family fallback lists) survive instead of being stripped/mangled.
+      const body = Object.entries(declarations)
+        .map(([property, value]) => `${property}:${value}`)
+        .join(';');
+      this._printStyle.push(`${selector}{${body}}`);
+    }
+  }
+
+  /**
+   * @returns the string that create the stylesheet which will be injected
+   * later within <style></style> tag.
+   */
+  public returnStyleValues(): string {
+    const styleNonce = this.nonce ? ` nonce="${this.nonce}"` : '';
+    return `<style${styleNonce}> ${this._printStyle.join(' ')} </style>`;
+  }
+
+  /**
+   * @returns string which contains the link tags containing the css which will
+   * be injected later within <head></head> tag.
+   *
+   */
+  private returnStyleSheetLinkTags(): string {
+    return this._styleSheetFile;
+  }
+
+  /**
+   * Sets the style sheet file based on the provided CSS list.
+   *
+   * @param {string} cssList - CSS file or list of CSS files.
+   * @protected
+   */
+  // prettier-ignore
+  protected setStyleSheetFile(cssList: string): void {
+    if (!cssList) {
+      this._styleSheetFile = '';
+      return;
+    }
+    const files = cssList.split(',').map(f => f.trim());
+    const nonceAttr = this.nonce ? ` nonce="${this.nonce}"` : '';
+    this._styleSheetFile = files
+      .map(url => `<link${nonceAttr} rel="stylesheet" type="text/css" href="${url}">`)
+      .join('');
+  }
+
+  //#endregion
+
+  //#region Private methods used by PrintBase
+
+  private syncFormValues(source: HTMLElement, clone: HTMLElement): void {
+    // Select all form elements
+    const selector = 'input, select, textarea';
+    const sourceEls = source.querySelectorAll(selector);
+    const cloneEls = clone.querySelectorAll(selector);
+
+    for (let i = 0; i < sourceEls.length; i++) {
+      const srcNode = sourceEls[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      const cloneNode = cloneEls[i] as typeof srcNode;
+
+      if (srcNode instanceof HTMLInputElement) {
+        if (srcNode.type === 'checkbox' || srcNode.type === 'radio') {
+          if (srcNode.checked) cloneNode.setAttribute('checked', '');
+          else cloneNode.removeAttribute('checked'); // Remove if unchecked
+        } else if (srcNode.type === 'file') {
+          // File inputs can't be set programmatically for security
+          continue;
+        } else {
+          cloneNode.setAttribute('value', srcNode.value);
+        }
+      } else if (srcNode instanceof HTMLTextAreaElement) {
+        cloneNode.textContent = srcNode.value; // Use textContent, not innerHTML
+      } else if (srcNode instanceof HTMLSelectElement) {
+        Array.from((cloneNode as HTMLSelectElement).options).forEach((opt, idx) => {
+          if (idx === srcNode.selectedIndex) {
+            opt.setAttribute('selected', '');
+          } else {
+            opt.removeAttribute('selected'); // Remove from non-selected
+          }
+        });
+      }
+    }
+  }
+
+  /**
+   * Converts a canvas element to an image and returns its HTML string.
+   *
+   * @param {HTMLCanvasElement} canvasElm - The canvas element to convert.
+   * @returns {HTMLImageElement | null} - HTML Element of the image.
+   * @private
+   */
+  private canvasToImageHtml(canvasElm: HTMLCanvasElement): HTMLImageElement | null {
+    try {
+      const dataUrl = canvasElm.toDataURL(); // may throw if canvas is tainted
+      const img = this.document.createElement('img');
+      img.src = dataUrl;
+      img.style.maxWidth = '100%';
+
+      // Preserve displayed size (not just bitmap size)
+      const rect = canvasElm.getBoundingClientRect();
+      if (rect.width) img.style.width = `${rect.width}px`;
+      if (rect.height) img.style.height = `${rect.height}px`;
+
+      return img;
+    } catch (err) {
+      console.warn(`Canvas conversion failed for ${canvasElm}. Likely the canvas is tainted:`, err);
+      // If toDataURL() fails (e.g., tainted canvas), keep canvas as-is in print output
+      return null;
+    }
+  }
+
+  /**
+   * Includes canvas contents in the print section via img tags.
+   *
+   * @private
+   * @param source
+   * @param clone
+   */
+  private updateCanvasToImage(source: HTMLElement, clone: HTMLElement): void {
+    const sourceCanvases = source.querySelectorAll('canvas');
+    const cloneCanvases = clone.querySelectorAll('canvas');
+
+    for (let i = 0; i < sourceCanvases.length; i++) {
+      const srcCanvas = sourceCanvases[i];
+      const cloneCanvas = cloneCanvases[i];
+      const img = this.canvasToImageHtml(srcCanvas);
+      if (img) {
+        cloneCanvas.replaceWith(img);
+      }
+    }
+  }
+
+  /**
+   * Retrieves the HTML content of a specified printing section.
+   *
+   * @param {string} printSectionId - Id of the printing section.
+   * @returns {string | null} - HTML content of the printing section, or null if not found.
+   * @private
+   */
+  private getHtmlContents(printSectionId: string): string | null {
+    const sourceElm = this.document.getElementById(printSectionId);
+    if (!sourceElm) return null;
+
+    const cloneElm = sourceElm.cloneNode(true) as HTMLElement; // cloneNode(true) deep clones subtree
+
+    this.syncFormValues(sourceElm, cloneElm);
+    this.updateCanvasToImage(sourceElm, cloneElm);
+
+    return cloneElm.outerHTML;
+  }
+
+  /**
+   * Retrieves the HTML content of elements with the specified tag.
+   *
+   * @param {keyof HTMLElementTagNameMap} tag - HTML tag name.
+   * @returns {string} - Concatenated outerHTML of elements with the specified tag.
+   * @private
+   */
+  private getElementTag(tag: keyof HTMLElementTagNameMap): string {
+    const html: string[] = [];
+    const elements = this.document.getElementsByTagName(tag);
+    for (const el of Array.from(elements)) {
+      html.push((el as Element).outerHTML);
+    }
+    return html.join('\r\n');
+  }
+
+  //#endregion
+
+  protected notifyPrintComplete() {
+    this.printComplete.next();
+  }
+
+  /**
+   * Prints the specified content using the provided print options.
+   *
+   * @public
+   * @param printOptionInput - Options for printing.
+   */
+  protected print(printOptionInput?: Partial<PrintOptions>): void {
+    const printOptions = new PrintOptions(printOptionInput);
+    if (printOptions.printMethod === 'iframe') {
+      this.printWithIframe(printOptions);
+    } else {
+      this.printWithWindow(printOptions);
+    }
+  }
+
+  protected printWithWindow(printOptions: PrintOptions) {
+    // If the openNewTab option is set to true, then set the popOut option to an empty string
+    // This will cause the print dialog to open in a new tab.
+    const popOut = printOptions.printMethod === 'tab' ? '' : 'top=0,left=0,height=auto,width=auto';
+
+    const popupWin = window.open('', '_blank', popOut);
+
+    if (!popupWin) {
+      // the popup window could not be opened.
+      console.error('Could not open print window.');
+      return;
+    }
+
+    popupWin.document.open();
+    // Create the HTML structure
+    this.buildPrintDocument(popupWin.document, printOptions);
+
+    popupWin.document.close();
+
+    // Listen for the window closing
+    const checkClosedInterval = setInterval(() => {
+      if (popupWin.closed) {
+        clearInterval(checkClosedInterval);
+        this.notifyPrintComplete();
+      }
+    }, 500);
+
+    popupWin.addEventListener('load', () => {
+      if (!printOptions.previewOnly) {
+        setTimeout(() => {
+          popupWin.print();
+          if (printOptions.closeWindow) popupWin.close();
+        }, printOptions.printDelay || 0);
+      }
+    });
+  }
+
+  private printWithIframe(printOptions: PrintOptions): void {
+    if (this._iframeElement) {
+      this._iframeElement.remove();
+    }
+    this._iframeElement = this.document.createElement('iframe');
+    const iframe = this._iframeElement;
+    iframe.id = 'print-iframe-' + new Date().getTime();
+    iframe.style.position = 'absolute';
+    iframe.style.left = '-9999px';
+    iframe.style.top = '-9999px';
+    iframe.style.width = '0px';
+    iframe.style.height = '0px';
+    iframe.ariaHidden = 'true';
+
+    this.document.body.appendChild(iframe);
+
+    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+    if (!iframeDoc) {
+      console.error('Could not access iframe document.');
+      this.document.body.removeChild(iframe);
+      return;
+    }
+
+    iframeDoc.open();
+    const success = this.buildPrintDocument(iframeDoc, printOptions);
+    if (!success) {
+      iframeDoc.close();
+      this.document.body.removeChild(iframe);
+      return;
+    }
+    iframeDoc.close();
+
+    iframe.onload = () => {
+      const printWindow = iframe.contentWindow;
+      if (!printWindow) {
+        console.error('Could not access iframe window.');
+        this.document.body.removeChild(iframe);
+        return;
+      }
+
+      setTimeout(() => {
+        if (printOptions.previewOnly) {
+          return;
+        }
+        printWindow.focus();
+        printWindow.print();
+
+        const mediaQueryList = printWindow.matchMedia('print');
+        const listener = (mql: MediaQueryListEvent) => {
+          if (!mql.matches) {
+            this.notifyPrintComplete();
+            mediaQueryList.removeEventListener('change', listener);
+          }
+        };
+
+        mediaQueryList.addEventListener('change', listener);
+      }, printOptions.printDelay || 0);
+    };
+  }
+
+  private prepareDocumentComponents(printOptions: PrintOptions) {
+    let styles = '';
+    let links = '';
+    const baseTag = this.getElementTag('base');
+
+    if (printOptions.useExistingCss) {
+      styles = this.getElementTag('style');
+      links = this.getElementTag('link');
+    }
+
+    const printContents = this.getHtmlContents(printOptions.printSectionId);
+
+    return { styles, links, baseTag, printContents };
+  }
+
+  private buildPrintDocument(doc: Document, printOptions: PrintOptions): boolean {
+    const components = this.prepareDocumentComponents(printOptions);
+
+    if (!components.printContents) {
+      console.error(`Print section with id "${printOptions.printSectionId}" not found.`);
+      return false;
+    }
+
+    const html = doc.createElement('html');
+    const head = doc.createElement('head');
+    const body = doc.createElement('body');
+
+    // Set title
+    const title = doc.createElement('title');
+    title.textContent = printOptions.printTitle || '';
+    head.appendChild(title);
+
+    // Add all head content
+    if (components.baseTag) {
+      head.innerHTML += components.baseTag;
+    }
+    head.innerHTML += this.returnStyleValues();
+    head.innerHTML += this.returnStyleSheetLinkTags();
+    head.innerHTML += components.styles;
+    head.innerHTML += components.links;
+
+    // Set body class and content
+    if (printOptions.bodyClass) body.className = printOptions.bodyClass;
+    body.innerHTML += components.printContents;
+
+    // Assemble document
+    html.appendChild(head);
+    html.appendChild(body);
+    doc.appendChild(html);
+
+    return true;
+  }
+}