Print in React Diagram Component

21 Oct 202524 minutes to read

The React 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.

 function App() {
    let diagramInstance;
    let options = {};
    diagramInstance.print(options);
    return (
        < DiagramComponent 
        id="container" 
        width={'1500'} 
        height={'1500'}
        ref={(diagram) => (diagramInstance = diagram)}
        > </DiagramComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Note: To Print diagram you need to inject PrintAndExport in the diagram.

To print the React Diagram elements in various formats, refer to the video link below.

The diagram printing behavior can be extensively customized using the printOptionsparameter. 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, PrintAndExport } from "@syncfusion/ej2-react-diagrams";

export default function App() {
  let diagramInstance;
  let regionInstance;

  // Initialize nodes for the diagram
  let nodes = [
    {
      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 action
  function handlePrint() {
    let regionValue = regionInstance.value;
    let printOptions = { region: regionValue };
    diagramInstance.print(printOptions);
  };

  return (
    // Initialize Diagram component
    <div>
      <select id="region" ref={(region) => (regionInstance = region)}>
        <option value="Content">Content</option>
        <option value="PageSettings">PageSettings</option>
      </select>
      <button id="print" onClick={handlePrint}>Print Diagram</button>
      <DiagramComponent
        id="container"
        ref={(diagram) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        pageSettings={{ width: 200, height: 200 }}
      >
        <Inject services={[PrintAndExport]} />
      </DiagramComponent>
    </div>
  );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, PrintAndExport, NodeModel, DiagramRegions, IPrintOptions } from "@syncfusion/ej2-react-diagrams";

export default function App() {
  let diagramInstance: DiagramComponent;
  let regionInstance: HTMLSelectElement;

  // Initialize nodes for the diagram
  let 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 handlePrint() {
    let printOptions: IPrintOptions = {};
    let regionValue = (regionInstance.value as DiagramRegions);
    printOptions.region = regionValue;
    diagramInstance.print(printOptions);
  };

  return (
    // Initialize Diagram component
    <div>
      <select id="region" ref={(region: any) => (regionInstance = region)}>
        <option value="Content">Content</option>
        <option value="PageSettings">PageSettings</option>
      </select>
      <button id="print" onClick={handlePrint}>Print Diagram</button>
      <DiagramComponent
        id="container"
        ref={(diagram: any) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        pageSettings={{ width: 200, height: 200 }}
      >
        <Inject services={[PrintAndExport]} />
      </DiagramComponent>
    </div>
  );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

Multiple Page

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 * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, PrintAndExport, SnapConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {
  let diagramInstance;

  // Initialize nodes for the diagram
  let nodes = [
    {
      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' }],
    },
  ];

  //Function to print the diagram objects.
  function handlePrint() {
    let printOptions = {}
    printOptions.region = 'PageSettings';
    printOptions.multiplePage = true;
    diagramInstance.print(printOptions);
  };

  return (
    // Initialize Diagram component
    <div>
      <button id="print" onClick={handlePrint}>Print Diagram</button>
      <DiagramComponent
        id="container"
        ref={(diagram) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        snapSettings={{ constraints: SnapConstraints.None }}
        pageSettings={{
          width: 300,
          height: 500,
          multiplePage: true,
          showPageBreaks: true,
        }}
      >
        <Inject services={[PrintAndExport]} />
      </DiagramComponent>
    </div>
  );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, IPrintOptions, Inject, NodeModel, PrintAndExport, SnapConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {
  let diagramInstance: DiagramComponent;

  // Initialize nodes for the diagram
  let 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' }],
    },
  ];

  //Function to print the diagram objects.
  function handlePrint() {
    let printOptions: IPrintOptions = {}
    printOptions.region = 'PageSettings';
    printOptions.multiplePage = true;
    diagramInstance.print(printOptions);
  };

  return (
    // Initialize Diagram component
    <div>
      <button id="print" onClick={handlePrint}>Print Diagram</button>
      <DiagramComponent
        id="container"
        ref={(diagram: any) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        snapSettings={{ constraints: SnapConstraints.None }}
        pageSettings={{
          width: 300,
          height: 500,
          multiplePage: true,
          showPageBreaks: true,
        }}
      >
        <Inject services={[PrintAndExport]} />
      </DiagramComponent>
    </div>
  );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

Margin

The margin for the print region can be set using the margin property of the printOptions

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, PrintAndExport, SnapConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {
  let diagramInstance;

  // Initialize nodes for the diagram
  let nodes = [
    {
      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' }],
    },
  ];

  //Function to print the diagram objects.
  function handlePrint() {
    let printOptions = {}
    printOptions.margin = { left: 400, top: 100 };
    diagramInstance.print(printOptions);
  };

  return (
    // Initialize Diagram component
    <div>
      <button id="print" onClick={handlePrint}>Print Diagram</button>
      <DiagramComponent
        id="container"
        ref={(diagram) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        snapSettings={{ constraints: SnapConstraints.None }}
      >
        <Inject services={[PrintAndExport]} />
      </DiagramComponent>
    </div>
  );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, IPrintOptions, NodeModel, PrintAndExport, SnapConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {
  let diagramInstance : DiagramComponent;

  // Initialize nodes for the diagram
  let 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' }],
    },
  ];

  //Function to print the diagram objects.
  function handlePrint() {
    let printOptions: IPrintOptions = {}
    printOptions.margin = { left: 400, top: 100 };
    diagramInstance.print(printOptions);
  };

  return (
    // Initialize Diagram component
    <div>
      <button id="print" onClick={handlePrint}>Print Diagram</button>
      <DiagramComponent
        id="container"
        ref={(diagram: any) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        snapSettings={{ constraints: SnapConstraints.None }}
      >
        <Inject services={[PrintAndExport]} />
      </DiagramComponent>
    </div>
  );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

Page Width and Page Height

The pageHeight and pageWidth 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, PrintAndExport, SnapConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {
    let diagramInstance;

    // Initialize nodes for the diagram
    let nodes = [
        {
            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' }],
        },
    ];

    //Function to print the diagram objects.
    function handlePrint() {
        let printOptions = {}
        printOptions.pageHeight = 700;
        printOptions.pageWidth = 1000;
        diagramInstance.print(printOptions);
    };

    return (
      // Initialize Diagram component
        <div>
            <button id="print" onClick={handlePrint}>Print Diagram</button>
            <DiagramComponent
                id="container"
                ref={(diagram) => (diagramInstance = diagram)}
                width={'100%'}
                height={'600px'}
                nodes={nodes}
                snapSettings={{ constraints: SnapConstraints.None }}
            >
                <Inject services={[PrintAndExport]} />
            </DiagramComponent>
        </div>
    );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, IPrintOptions, NodeModel, PrintAndExport, SnapConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {
  let diagramInstance: DiagramComponent;

  // Initialize nodes for the diagram
  let 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' }],
    },
  ];

  //Function to print the diagram objects.
  function handlePrint() {
    let printOptions: IPrintOptions = {}
    printOptions.pageHeight = 700;
    printOptions.pageWidth = 1000;
    diagramInstance.print(printOptions);
  };

  return (
    // Initialize Diagram component
    <div>
      <button id="print" onClick={handlePrint}>Print Diagram</button>
      <DiagramComponent
        id="container"
        ref={(diagram: any) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        snapSettings={{ constraints: SnapConstraints.None }}
      >
        <Inject services={[PrintAndExport]} />
      </DiagramComponent>
    </div>
  );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

Page Orientation

pageOrientationproperty 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, PrintAndExport, SnapConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {
    let diagramInstance;

    // Initialize nodes for the diagram
    let nodes = [
        {
            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' }],
        },
    ];

    //Function to print the diagram objects.
    function handlePrint() {
        let printOptions = {}
        printOptions.pageOrientation = 'Portrait';
        diagramInstance.print(printOptions);
    };

    return (
        // Initialize Diagram component
        <div>
            <button id="print" onClick={handlePrint}>Print Diagram</button>
            <DiagramComponent
                id="container"
                ref={(diagram) => (diagramInstance = diagram)}
                width={'100%'}
                height={'600px'}
                nodes={nodes}
                snapSettings={{ constraints: SnapConstraints.None }}
            >
                <Inject services={[PrintAndExport]} />
            </DiagramComponent>
        </div>
    );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, IPrintOptions, NodeModel, PrintAndExport, SnapConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {
  let diagramInstance: DiagramComponent;

  // Initialize nodes for the diagram
  let 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' }],
    },
  ];

  //Function to print the diagram objects.
  function handlePrint() {
    let printOptions: IPrintOptions = {}
    printOptions.pageOrientation = 'Portrait';
    diagramInstance.print(printOptions);
  };

  return (
    // Initialize Diagram component
    <div>
      <button id="print" onClick={handlePrint}>Print Diagram</button>
      <DiagramComponent
        id="container"
        ref={(diagram: any) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        snapSettings={{ constraints: SnapConstraints.None }}
      >
        <Inject services={[PrintAndExport]} />
      </DiagramComponent>
    </div>
  );
};

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

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 export Html-and-Native node kb for more information.

See Also