Print in EJ2 TypeScript Diagram control
4 Dec 202424 minutes to read
The print
method helps to print the diagram as image.
let options: IPrintOptions = {};
diagram.print(options);
NOTE
To Print diagram you need to inject
PrintAndExport
in the diagram.
Print Options
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 {
Diagram,
DiagramRegions,
IPrintOptions,
NodeModel,
PrintAndExport,
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(PrintAndExport);
// A node is created and stored in nodes array.
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' }],
},
];
// initialize Diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '600px',
nodes: nodes,
pageSettings: { width: 200, height: 200 },
});
// render initialized Diagram
diagram.appendTo('#element');
(document.getElementById('print') as HTMLInputElement).onclick = () => {
let region = (document.getElementById('region') as HTMLInputElement).value;
//Print options to customize the print region
let options: IPrintOptions = {};
options.region = region as DiagramRegions;
diagram.print(options);
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input type="button" value="print" id="print" />
<label>Region</label>
<select id="region">
<option value="Content">Content</option>
<option value="PageSettings">PageSettings</option>
</select>
<div id='element'></div>
</div>
</body>
</html>
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:
/**
* Print
*/
import {
PrintAndExport,
Diagram,
NodeModel,
SnapConstraints,
IPrintOptions,
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(PrintAndExport);
let diagram: Diagram;
//click event to perform printing the diagram objects.
(document.getElementById('print') as HTMLInputElement).onclick = () => {
let printOptions: IPrintOptions = {};
printOptions.region = 'PageSettings';
printOptions.multiplePage = true;
printOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 };
diagram.print(printOptions);
};
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' }],
},
];
//initialization of the Diagram.
diagram = new Diagram({
width: '100%',
height: '580px',
nodes: nodes,
snapSettings: { constraints: SnapConstraints.None },
pageSettings: {
width: 300,
height: 500,
multiplePage: true,
showPageBreaks: true,
},
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input type="button" value="print" id="print" />
<div id="element"></div>
</div>
</body>
</html>
Margin
The margin for the print region can be set using the margin
property of the printOptions
/**
* Print
*/
import {
PrintAndExport,
Diagram,
NodeModel,
SnapConstraints,
IPrintOptions,
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(PrintAndExport);
let diagram: Diagram;
//click event to perform printing the diagram objects.
(document.getElementById('print') as HTMLInputElement).onclick = () => {
let printOptions: IPrintOptions = {};
// Margin for the printing area
printOptions.margin = { left: 400, top: 100 };
diagram.print(printOptions);
};
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' }],
},
];
//initialization of the Diagram.
diagram = new Diagram({
width: '100%',
height: '580px',
nodes: nodes,
snapSettings: { constraints: SnapConstraints.None },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input type="button" value="print" id="print" />
<div id="element"></div>
</div>
</body>
</html>
Page width and Page height
The pageWidth
and pageHeight
property of printOptions
is used to set the size of the printing image. The following example demonstrates how to set the pageWidth and pageHeight.
/**
* Print
*/
import {
PrintAndExport,
Diagram,
NodeModel,
SnapConstraints,
IPrintOptions,
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(PrintAndExport);
let diagram: Diagram;
//click event to perform printing the diagram objects.
(document.getElementById('print') as HTMLInputElement).onclick = () => {
let printOptions: IPrintOptions = {};
//pageWidth and pageHeight
printOptions.pageHeight = 700;
printOptions.pageWidth = 1000;
diagram.print(printOptions);
};
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' }],
},
];
//initialization of the Diagram.
diagram = new Diagram({
width: '100%',
height: '580px',
nodes: nodes,
snapSettings: { constraints: SnapConstraints.None },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input type="button" value="print" id="print" />
<div id="element"></div>
</div>
</body>
</html>
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.
/**
* Print
*/
import {
PrintAndExport,
Diagram,
NodeModel,
SnapConstraints,
IPrintOptions,
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(PrintAndExport);
let diagram: Diagram;
//click event to perform printing the diagram objects.
document.getElementById('print').onclick = () => {
let printOptions: IPrintOptions = {};
printOptions.pageOrientation = 'Portrait';
diagram.print(printOptions);
};
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: 725,
shape: { type: 'Basic', shape: 'Ellipse' },
style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
annotations: [{ content: 'Node 4' }],
},
];
//initialization of the Diagram.
diagram = new Diagram({
width: '100%',
height: '580px',
nodes: nodes,
snapSettings: { constraints: SnapConstraints.None },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input type="button" value="print" id="print" />
<div id="element"></div>
</div>
</body>
</html>
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.