Print in React Diagram control

6 Dec 202424 minutes to read

The print method helps to print the diagram as image.

 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 can be customized while printing using the following properties of printOptions.

The available print options are listed in the table below.

Name Type Description
region enum Sets the region of the diagram to be printed.
margin object Sets the margin of the page to be printed.
stretch enum Resizes the diagram content to fill its allocated space and printed.
multiplePage boolean Prints the diagram into multiple pages.
pageWidth number Sets the page width of the diagram while printing the diagram into multiple pages.
pageHeight number Sets the page height of the diagram while printing the diagram into multiple pages.
pageOrientation enum Sets the orientation of the page.

Region

Printing particular region of diagram is possible by using the region property of the printOptions.

The following code example illustrates how to print the diagram based on region.

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

Printing a diagram across multiple pages is possible by setting the multiplePage property of printOptions to true.

The following code example demonstrates how to set multiplePage to true:

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 property of printOptions is used to set the size of the printing image. The following example demonstrates how to set the pageWidth and pageHeight.

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

pageOrientation of printOptions is used to set the orientation of the page to be printed.

  • Landscape - Display with page Width is more than the page Height.
  • Portrait - Display with page Height is more than the page width.

The following example shows how to set pageOrientation for 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.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 diagram with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion Essential® PDF library. This library incorporates the Syncfusion Essential® HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to export Html-and-Native node kb for more information.

See Also