OrgChart JS support the following export formats:
In order to enable PDF export you need to add node menu item in menu option and/or nodeMenu
var chart = new OrgChart(document.getElementById("tree"), { menu: { pdf: { text: "Export PDF" }, png: { text: "Export PNG" }, svg: { text: "Export SVG" }, csv: { text: "Export CSV" } }, nodeMenu: { pdf: { text: "Export PDF" }, png: { text: "Export PNG" }, svg: { text: "Export SVG" } }, ... });
Here is the result:
By default collapsed children will not be exported, if you want to change that you have to add your own export node menu item
function pdf(nodeId) { chart.exportPDF({filename: "MyFileName.pdf", expandChildren: true, nodeId: nodeId}); } function png(nodeId) { chart.exportPNG({filename: "MyFileName.png", expandChildren: true, nodeId: nodeId}); } function svg(nodeId) { chart.exportSVG({filename: "MyFileName.svg", expandChildren: true, nodeId: nodeId}); } var chart = new OrgChart(document.getElementById("tree"), { menu: { export_pdf: { text: "Export PDF", icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"), onClick: pdf }, export_png: { text: "Export PNG", icon: OrgChart.icon.png(24, 24, "#7A7A7A"), onClick: png }, export_svg: { text: "Export SVG", icon: OrgChart.icon.svg(24, 24, "#7A7A7A"), onClick: svg } }, nodeMenu: { export_pdf: { text: "Export PDF", icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"), onClick: pdf }, export_png: { text: "Export PNG", icon: OrgChart.icon.png(24, 24, "#7A7A7A"), onClick: png }, export_svg: { text: "Export SVG", icon: OrgChart.icon.svg(24, 24, "#7A7A7A"), onClick: svg } }, ... });
In the demo below the chart is collapsed, the children will be expanded on export
Export to A4 format:
function pdf(nodeId) { chart.exportPDF({ format: "A4" }); } var chart = new OrgChart(document.getElementById("tree"), { menu: { export_pdf: { text: "Export PDF", icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"), onClick: pdf }, } ... });
Add header and footer:
function pdf(nodeId) { chart.exportPDF({ format: "A4", header: 'My Header', footer: 'My Footer. Page {current-page} of {total-pages}' }); } var chart = new OrgChart(document.getElementById("tree"), { menu: { export_pdf: { text: "Export PDF", icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"), onClick: pdf }, } ... });
PDF Preview:
OrgChart.pdfPrevUI.show(chart, { format: "A4", header: 'My Header', footer: 'My Footer. Page {current-page} of {total-pages}' });
CSV and SVG are client side exports, PDF and PNG are calling BALKAN OrgChartJS export server.
There may be cases where you don't want to use BALKAN OrgChartJS's export server running at https://balkan.app/export, for instance if you are running a secure website or if you don't want your data to be passed to https://balkan.app. In that cases you have to setup your export server and to change exportUrl option
var chart = new OrgChart(document.getElementById("tree"), { exportUrl: "https://MyServer.com/export" ... });
MyServer is the domain name of you server. It could be hosted under http or https.
You could use exportstart and exportend events to change the export behavior.
exportstart args: | exportend args: |
args.ext args.filename args.nodes args.openInNewTab |
args.content args.ext args.filename args.nodes |
Here is an example of how you could get only the name and the title fiedls, changing args.nodes:
chart.on('exportstart', function(semder, args){ if (args.ext == 'csv' || args.ext == 'xml'){ var newNodes = []; for(var i = 0; i < args.nodes.length; i++){ newNodes.push({ name: args.nodes[i].name, title: args.nodes[i].title }) } args.nodes = newNodes; } });
The padding option sets the padding area on all four sides of the OrgChart. You could Add padding on export and previewv.
var chart = new OrgChart(document.getElementById("tree"), { ... menu: { export_pdf: { text: "Export PDF", icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"), onClick: pdf } }, }); function pdf(nodeId) { chart.exportPDF({ format: "A4", padding: 50 }); }
You can export styles using the property args.styles
HTML:
<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet"> <style id="myStyles"> .node { font-family: 'Gochi Hand'; } .node.HR rect { fill: #E99113; } </style>
JavaScript:
chart.on('exportstart', function(sender, args){ args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">'; args.styles += document.getElementById('myStyles').outerHTML; });