How to Customize Header and Footer in Diagram Printing
Headers and footers, located in the top and bottom margins of each page, respectively, are essential elements in document formatting. When the header and footer option is enabled in the print dialog box, these sections become visible.
The diagram offers the capability to export its content, with the client-side method exportDiagram facilitating this process.
Customizing the header and footer involves adding personalized content, including elements like time, date, or even adjusting the position of the content within the header and footer. This customization occurs in the print window. Refer to the code snippet below to understand how to achieve custom printing while exporting the diagram using exportDiagram.
function toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Print') {
var image;
var options: IExportOptions = {};
options.mode = 'Data';
options.region = 'Content';
options.pageOrientation = 'Portrait';
options.multiplePage = false;
image = diagram.exportDiagram(options);
printImages(image, options);
}
}
function printImages(url: any, options: any) {
var _this: any = diagram.printandExportModule;
var attr = {
id: diagram.element.id + '_printImage',
src: url
};
options.margin = { top: 0, bottom: 0, right: 0, left: 0 };
var img = createHtmlElement('img', attr);
img.onload = function() {
var div = _this.getMultipleImage(img, options);
var printWind = window.open('');
if (printWind != null) {
if (div instanceof HTMLElement) {
printWind.document.write(
'<html><head><style> @page { size: auto; margin: 0mm; }
body{margin:0px;} div.parent { position: relative; } div.upper { position: absolute;left: 50%;top: 0%;} div.absolute { position: absolute;left: 50%;bottom: 0%;} </style>
//customised header
<div class=upper>Syncfusion Diagram control</div>
//customised Footer
<div class=absolute >Page No: 1</div></head></html>'
);
printWind.document.write(
'<BODY onload="setTimeout(function(){window.print();}, 100)">'
);
printWind.document.write('<center>' + div.innerHTML + '</center>');
printWind.document.close();
}
}
};
}
<style> @page { size: auto; margin: 0mm; } </style> |
Sample Link: https://stackblitz.com/edit/gwdipf?file=index.ts
