Add Header and Footer on export

Question

Hello,Following the documentation link, I am able to export the diagram component as JPG/PNG. I would like to add some header and footer text dynamically during export. How can I do this?https://ej2.syncfusion.com/react/documentation/diagram/export/

Aravind Ravi · Accepted Answer

Hi Sam, 
 
We have created a sample to add Header and footer while export the diagram. Before export the diagram, add the header and footer node in the diagram. By using the text node, we can able to add text in the diagram. The shape property of the node allows you to set the type of node and for text nodes, it should be set as text. In addition, define the content object that is used to define the text to be added and style is used to customize the appearance of that text. So after diagram gets exported, remove the header and footer node from the diagram, by using the remove public Api method. Please refer to below code snippet 
 




function click() { 
  var bounds = diagramInstance.getDiagramBounds(); 
  var node = { 
    id: "text1", 
    height: 50, 
    width: 50, 
    shape: { type: "Text", content: "Header" }, 
    style: { strokeWidth: 0 }, 
    offsetX: bounds.width / 2, 
    offsetY: 50 
  }; 
  diagramInstance.add(node); 
  var node2 = { 
    id: "text2", 
    height: 50, 
    width: 50, 
    shape: { type: "Text", content: "Footer" }, 
    style: { strokeWidth: 0 }, 
    offsetX: bounds.width / 2, 
    offsetY: bounds.height - 50 
  }; 
  diagramInstance.add(node2); 
  let options = {}; 
 
  options.margin = { left: 10, right: 10, top: 10, bottom: 10 }; 
  options.fileName = "format"; 
  options.format = "PNG"; 
  diagramInstance.exportDiagram(options); 
  diagramInstance.remove(diagramInstance.getObject(node.id)); 
  diagramInstance.remove(diagramInstance.getObject(node2.id)); 
} 
 
Sample: https://stackblitz.com/edit/react-vhlxtu 
 
Regards 
Aravind Ravi

Sam · Answer

Thanks Ravi for the example. I will try it out.What happens if I have undo/redo enabled will this add/remove be in the history?

Aravind Ravi · Answer

Hi Sam, 
 
Yes, when we add or delete node, a history entry will be added. We can able to restrict the add of history entry by using the canLog function. In the history manager canLog function set entry.cancel as true while add and delete the node. After delete the node from diagram, set the entry.cancel as false in the canLog function. So that history entry does not gets added in undo/redo function. Please refer to the below code snippet and sample 
 




function click() { 
  var bounds = diagramInstance.getDiagramBounds(); 
  diagramInstance.historyManager.canLog = function(entry) { 
    entry.cancel = true; 
    return entry; 
  }; 
  var node = { 
    id: "text1", 
    height: 50, 
    width: 50, 
    shape: { type: "Text", content: "Header" }, 
    style: { strokeWidth: 0 }, 
    offsetX: bounds.width / 2, 
    offsetY: 50 
  }; 
  diagramInstance.add(node); 
  var node2 = { 
    id: "text2", 
    height: 50, 
    width: 50, 
    shape: { type: "Text", content: "Footer" }, 
    style: { strokeWidth: 0 }, 
    offsetX: bounds.width / 2, 
    offsetY: bounds.height - 50 
  }; 
  diagramInstance.add(node2); 
  let options = {}; 
 
  options.margin = { left: 10, right: 10, top: 10, bottom: 10 }; 
  options.fileName = "format"; 
  options.format = "PNG"; 
  diagramInstance.exportDiagram(options); 
  diagramInstance.remove(diagramInstance.getObject(node.id)); 
  diagramInstance.remove(diagramInstance.getObject(node2.id)); 
  diagramInstance.historyManager.canLog = function(entry) { 
    entry.cancel = false; 
    return entry; 
  }; 
} 
 
Sample: https://stackblitz.com/edit/react-vhlxtu-rauzqt 
 
Regards 
Aravind Ravi

Faran Anwar · Answer

Hi,How we can do this in javascript ej2 by using exportModule.export. Does anyone have any example?

Gobinath Dhamotharan · Answer

Hi Faran,We created a sample in JavaScript platform to achieve your requirement. Please refer to the below sample for your reference.Samplehttps://stackblitz.com/edit/ed3fcw-ak4vlk?file=index.js