Print in Angular Diagram

16 Aug 202624 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 { Component, ViewChild } from '@angular/core';
import { Diagram, DiagramComponent, DiagramModule, IPrintOptions, PrintAndExport } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(PrintAndExport);

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DiagramModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('diagram')
  public diagram: DiagramComponent;

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

To print diagrams, inject the PrintAndExport module 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 Default Description Example Values
region DiagramRegions ‘PageSettings’ Specifies the region of the diagram to be printed using the DiagramRegions type. ‘PageSettings’, ‘Content’, ‘CustomBounds’
margin MarginModel { left: 0, top: 0, bottom: 0, right: 0 } Sets the margin spacing around the printed content in pixels. { left: 10, top: 10, bottom: 10, right: 10 }
stretch Stretch ‘Stretch’ Resizes the diagram content to fit the allocated print space using the Stretch type. ‘None’, ‘Stretch’, ‘Meet’, ‘Slice’
multiplePage boolean false Enables printing the diagram across multiple pages when content exceeds single page dimensions. true, false
pageWidth number null Defines the width of each page in pixels when using multiple page printing. 816, 1056
pageHeight number null Sets the height of each page in pixels for multiple page printing scenarios. 1056, 816
pageOrientation PageOrientation ‘Landscape’ Controls the page orientation for the printed output using the PageOrientation type. ‘Landscape’, ‘Portrait’

Region

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

  • PageSettings - Prints the diagram based on the configured page settings.
  • Content - Prints only the content (nodes/connectors) of the diagram.
  • CustomBounds - Prints an explicitly defined custom region of the diagram.

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';
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.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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Margin

Print margins can be customized using the margin property, which accepts an object that specifies 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';
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';
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';
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 Print or export HTML and native nodes knowledge base article for detailed implementation guidance.

See Also