Print in Angular Diagram Component

25 Aug 202524 minutes to read

The Angular Diagram component provides comprehensive printing capabilities that allow users to generate high-quality printed outputs of their diagrams. The print method enables printing the diagram as an image with extensive customization options for different printing scenarios.

import { PrintAndExport } from '@syncfusion/ej2-angular-diagrams';

public options: IPrintOptions;
this.options = {
    region: 'PageSettings',
    multiplePage: false,
    margin: { left: 0, top: 0, bottom: 0, right: 0 }
};
diagram.print(this.options);

NOTE

To print diagrams, inject the PrintAndExport service into the diagram component using Diagram.Inject(PrintAndExport).

The diagram printing behavior can be extensively customized using the printOptions parameter. These options provide control over the printed output’s layout, size, and content selection.

The available print options are detailed in the table below:

Name Type Description Example Values
region enum Specifies the region of the diagram to be printed. Options include ‘Content’, ‘PageSettings’. ‘Content’, ‘PageSettings’
margin object Sets the margin spacing around the printed content in pixels. { left: 10, top: 10, bottom: 10, right: 10 }
stretch enum Resizes the diagram content to fit the allocated print space. Options include ‘Stretch’, ‘Meet’, ‘Slice’. ‘Stretch’, ‘Meet’
multiplePage boolean Enables printing the diagram across multiple pages when content exceeds single page dimensions. true, false
pageWidth number Defines the width of each page in pixels when using multiple page printing. 816, 1056
pageHeight number Sets the height of each page in pixels for multiple page printing scenarios. 1056, 816
pageOrientation enum Controls the page orientation for the printed output. ‘Landscape’, ‘Portrait’

Region

The region property allows selective printing of specific diagram areas. This feature is particularly useful when working with large diagrams where only certain sections need to be printed.

The following code example illustrates how to print the diagram based on different regions:

import { DiagramModule, DiagramRegions, IPrintOptions, PageSettingsModel, PrintAndExport,
  DiagramComponent, Diagram, NodeModel  } from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

Diagram.Inject(PrintAndExport);

@Component({
  imports: [DiagramModule],
  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `
    <label for="region">Region: </label>
    <select id="region"  #regionSelect>
      <option value="PageSettings">PageSettings</option>
      <option value="Content">Content</option>
    </select>
    <button (click)="onPrintClick(regionSelect.value)">Print</button>
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes] ='nodes' [pageSettings] ='pageSettings'>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent {
  @ViewChild('diagram')
  public diagram!: DiagramComponent;
  public printOptions: IPrintOptions = {};
  public pageSettings: PageSettingsModel = { width: 200, height: 200 };

  public nodes: NodeModel[] = [
    {
      id: 'node1',
      width: 100,
      height: 100,
      offsetX: 100,
      offsetY: 100,
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 100,
      offsetX: 300,
      offsetY: 130,
      annotations: [{ content: 'Node 2' }],
    },
  ];

  // Function to handle the print button click
  onPrintClick(region: string) {
    this.printOptions = {
      region: region as DiagramRegions,
    };
    this.diagram.print(this.printOptions);
  }
  
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple pages

Large diagrams can be printed across multiple pages by setting the multiplePage property to true. This feature automatically divides the diagram content across multiple print pages while maintaining proper scaling and alignment.

The following code example demonstrates how to enable multiple page printing:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, NodeModel, Diagram, PageSettingsModel,
  SnapConstraints, IPrintOptions, PrintAndExport } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(PrintAndExport);

@Component({
  selector: 'app-container',
  template: `
  <div> <button (click)="onPrintClick()">Print</button>
  <div id="element"></div></div>`,
  imports: [
    DiagramModule
  ],
  providers: [],
  standalone: true,
  encapsulation: ViewEncapsulation.None,

})

export class AppComponent {
  @ViewChild('diagram')
  public diagram!: DiagramComponent;
  public diagramInstance!: Diagram;
  constructor() { }
  public nodes: NodeModel[] = [
    {
      id: 'node1',
      width: 100,
      height: 50,
      offsetX: 100,
      offsetY: 100,
      style: { strokeColor: '#868686', fill: '#d5f5d5' },
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 75,
      offsetX: 100,
      offsetY: 225,
      shape: { type: 'Basic', shape: 'Diamond' },
      style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
      annotations: [{ content: 'Node 2' }],
    },
    {
      id: 'node3',
      width: 135,
      height: 50,
      offsetX: 400,
      offsetY: 425,
      style: { strokeColor: '#a8a8a8', fill: '#faebee' },
      annotations: [{ content: 'Node 3' }],
    },
    {
      id: 'node4',
      width: 125,
      height: 50,
      offsetX: 400,
      offsetY: 525,
      shape: { type: 'Basic', shape: 'Ellipse' },
      style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
      annotations: [{ content: 'Node 4' }],
    },
  ];

  ngOnInit(): void {
    // Programmatically create the Diagram component
    this.diagramInstance = new Diagram({
      width: '100%',
      height: '580px',
      nodes: this.nodes,
      snapSettings: { constraints: SnapConstraints.None },
      pageSettings: {
        width: 300,
        height: 500,
        multiplePage: true,
        showPageBreaks: true,
      } as PageSettingsModel,
    });

    this.diagramInstance.appendTo('#element');
  }

  onPrintClick() {
    const printOptions: IPrintOptions = {};
    printOptions.mode = 'Data';
    printOptions.region = 'PageSettings';
    printOptions.multiplePage = true;
    printOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 };
    this.diagramInstance.print(printOptions);
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Margin

Print margins can be customized using the margin property, which accepts an object specifying the spacing for all four sides of the printed output. This ensures proper spacing and professional appearance of printed diagrams.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { DiagramComponent, DiagramModule, NodeModel, Diagram, SnapConstraints,
  IPrintOptions, PrintAndExport } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(PrintAndExport);

@Component({
  selector: 'app-container',
  template: `
  <div> <button (click)="onPrintClick()">Print</button>
  <div id="element"></div></div>`,
  imports: [
    DiagramModule
  ],
  providers: [],
  standalone: true,
  encapsulation: ViewEncapsulation.None

})

export class AppComponent {
  @ViewChild('diagram')
  public diagram!: DiagramComponent;
  public diagramInstance!: Diagram;
  constructor() { }
  public nodes: NodeModel[] = [
    {
      id: 'node1',
      width: 100,
      height: 50,
      offsetX: 100,
      offsetY: 100,
      style: { strokeColor: '#868686', fill: '#d5f5d5' },
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 75,
      offsetX: 100,
      offsetY: 225,
      shape: { type: 'Basic', shape: 'Diamond' },
      style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
      annotations: [{ content: 'Node 2' }],
    },
    {
      id: 'node3',
      width: 135,
      height: 50,
      offsetX: 400,
      offsetY: 425,
      style: { strokeColor: '#a8a8a8', fill: '#faebee' },
      annotations: [{ content: 'Node 3' }],
    },
    {
      id: 'node4',
      width: 125,
      height: 50,
      offsetX: 400,
      offsetY: 525,
      shape: { type: 'Basic', shape: 'Ellipse' },
      style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
      annotations: [{ content: 'Node 4' }],
    },
  ];

  ngOnInit(): void {
    // Programmatically create the Diagram component
    this.diagramInstance = new Diagram({
      width: '100%',
      height: '580px',
      nodes: this.nodes,
      snapSettings: { constraints: SnapConstraints.None },
    });

    this.diagramInstance.appendTo('#element');
  }

  onPrintClick() {
    const printOptions: IPrintOptions = {};
    printOptions.margin = { left: 400, top: 100 };
    this.diagramInstance.print(printOptions);
  };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Page width and Page height

The pageWidth and pageHeight properties control the dimensions of the printed output. These settings are particularly important when printing to specific paper sizes or when precise scaling is required.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { DiagramComponent, DiagramModule, NodeModel, Diagram, SnapConstraints,
  IPrintOptions, PrintAndExport } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(PrintAndExport);

@Component({
  selector: 'app-container',
  template: `
  <div> <button (click)="onPrintClick()">Print</button>
  <div id="element"></div></div>`,
  imports: [
    DiagramModule
  ],
  providers: [],
  standalone: true,
  encapsulation: ViewEncapsulation.None

})

export class AppComponent {
  @ViewChild('diagram')
  public diagram!: DiagramComponent;
  public diagramInstance!: Diagram;
  constructor() { }
  public nodes: NodeModel[] = [
    {
      id: 'node1',
      width: 100,
      height: 50,
      offsetX: 100,
      offsetY: 100,
      style: { strokeColor: '#868686', fill: '#d5f5d5' },
      annotations: [{ content: 'Node 1' }],
    },
  
    {
      id: 'node2',
      width: 100,
      height: 75,
      offsetX: 100,
      offsetY: 225,
      shape: { type: 'Basic', shape: 'Diamond' },
      style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
      annotations: [{ content: 'Node 2' }],
    },
    {
      id: 'node3',
      width: 135,
      height: 50,
      offsetX: 400,
      offsetY: 425,
      style: { strokeColor: '#a8a8a8', fill: '#faebee' },
      annotations: [{ content: 'Node 3' }],
    },
    {
      id: 'node4',
      width: 125,
      height: 50,
      offsetX: 400,
      offsetY: 525,
      shape: { type: 'Basic', shape: 'Ellipse' },
      style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
      annotations: [{ content: 'Node 4' }],
    },
  ];

  ngOnInit(): void {
    // Programmatically create the Diagram component
    this.diagramInstance = new Diagram({
      width: '100%',
      height: '580px',
      nodes: this.nodes,
      snapSettings: { constraints: SnapConstraints.None },
    });

    this.diagramInstance.appendTo('#element');
  }

  onPrintClick() {
    const printOptions: IPrintOptions = {};
    printOptions.pageHeight = 700;
    printOptions.pageWidth = 1000;
    this.diagramInstance.print(printOptions);
  };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Page Orientation

The pageOrientation property determines how the diagram is oriented on the printed page:

  • Landscape - Prints with page width greater than page height, ideal for wide diagrams
  • Portrait - Prints with page height greater than page width, suitable for tall diagrams

The following example shows how to configure page orientation:

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { DiagramComponent, DiagramModule, NodeModel, Diagram, SnapConstraints,
  IPrintOptions, PrintAndExport } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(PrintAndExport);

@Component({
  selector: 'app-container',
  template: `
  <div> <button (click)="onPrintClick()">Print</button>
  <div id="element"></div></div>`,
  imports: [
    DiagramModule
  ],
  providers: [],
  standalone: true,
  encapsulation: ViewEncapsulation.None

})

export class AppComponent {
  @ViewChild('diagram')
  public diagram!: DiagramComponent;
  public diagramInstance!: Diagram;
  constructor() { }
  public nodes: NodeModel[] = [
    {
      id: 'node1',
      width: 100,
      height: 50,
      offsetX: 100,
      offsetY: 100,
      style: { strokeColor: '#868686', fill: '#d5f5d5' },
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 75,
      offsetX: 100,
      offsetY: 225,
      shape: { type: 'Basic', shape: 'Diamond' },
      style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
      annotations: [{ content: 'Node 2' }],
    },
    {
      id: 'node3',
      width: 135,
      height: 50,
      offsetX: 400,
      offsetY: 425,
      style: { strokeColor: '#a8a8a8', fill: '#faebee' },
      annotations: [{ content: 'Node 3' }],
    },
    {
      id: 'node4',
      width: 125,
      height: 50,
      offsetX: 400,
      offsetY: 725,
      shape: { type: 'Basic', shape: 'Ellipse' },
      style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
      annotations: [{ content: 'Node 4' }],
    }
  ];

  ngOnInit(): void {
    // Programmatically create the Diagram component
    this.diagramInstance = new Diagram({
      width: '100%',
      height: '580px',
      nodes: this.nodes,
      snapSettings: { constraints: SnapConstraints.None },
    });

    this.diagramInstance.appendTo('#element');
  }

  onPrintClick() {
    const printOptions: IPrintOptions = {};
    printOptions.pageOrientation = 'Portrait';
    this.diagramInstance.print(printOptions);
  };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Limitations

Currently, printing diagrams containing native and HTML nodes is not directly supported due to browser security restrictions. To address this limitation, Syncfusion provides integration with the Syncfusion® Essential® PDF library. This library includes the Syncfusion® Essential® HTML converter, which utilizes the advanced Blink rendering engine to convert HTML content into printable images. Refer to the export Html-and-Native node knowledge base article for detailed implementation guidance.

See Also