Export

Family Tree JS support the following export formats:

PDF, PNG, SVG, XML and JSON

Adding export options

In order to enable an export, you need to add a menu item in menu and/or nodeMenu option:

 
    
    menu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        
        xml: { text: "Export XML" },
        json: { text: "Export JSON" }
    }
    
 
    
    nodeMenu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" }
    }
    

Here is the result:


Custom Export options

Export to A4 format:

First define the function:
 
    
function pdf() {
    family.exportPDF({
        format: "A4"
    });
}
    
Then use it in a menu option:
 
    
    menu: {
        export_pdf: {
            text: "Export PDF",
            icon: FamilyTree.icon.pdf(24, 24, "#7A7A7A"),
            onClick: pdf
        },
    }
    

Add header and footer:

Define the function:
 
    
function pdf() {
    family.exportPDF({
        format: "A4",
        header: 'My Header',
        footer: 'My Footer. Page {current-page} of {total-pages}'
    });
}
    
Use it in a menu option:
 
    
    menu: {
        export_pdf: {
            text: "Export PDF",
            icon: FamilyTree.icon.pdf(24, 24, "#7A7A7A"),
            onClick: pdf
        },
    }
    

Padding on export:

The padding option sets the padding area on all four sides of the tree. You could Add padding on export and preview.

 
    
function pdf() {
    family.exportPDF({
        padding: 100
    });
}
    

PDF Preview

 
    
function pdf() {
    FamilyTree.pdfPrevUI.show(family, {
        format: "A4",
        header: 'My Header',
        footer: 'My Footer. Page {current-page} of {total-pages}'
    });
}
    

Use the default Fit to page width option to not cut off the nodes at the page break.


Profile export

The exportPDFProfile and exportPNGProfile methods export the node details form.

In the below example we export a node profile after tree loading:

 
    
// add this method before family.load()
family.onInit(() => {
    family.exportPDFProfile({nodeId: 2})
});


Export server

CSV and SVG are client side exports, PDF and PNG are calling BALKAN FamilyTreeJS export server.

There may be cases where you don't want to use BALKAN FamilyTreeJS'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 own export server and to change exportUrl option:

 
    
    exportUrl: "https://MyServer.com/export"
    

MyServer is the domain name of you server. It could be hosted under http or https.

Default export server requirements:
  • To be able to export images using the default export server, they need to be public, i.e. you should be able to browse them in any browser.
  • The defaul export service has a limitation of 10Mb for a PDF file size. To be able to export a very large tree(>100 000 nodes), you will need to install your own export server.

Export arguments

You could use onExportStart and onExportEnd methods to change the export behavior.

 
    
// add before family.load()
family.onExportStart(() => {
    console.log("exporting")
});
    

CSV/XML

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 gender fiedls, changing args.nodes:

 

// add before family.load()
family.onExportStart((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,
                gender: args.nodes[i].gender
            })
        }
        args.nodes = newNodes;
    }
});
    

Exporting Styles

You can export styles using the property args.styles

HTML:

 
    
<style id="myStyles">
    @import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
    .node {
        font-family: 'Gochi Hand';
    }
    .node.baby rect {
        fill: rgb(255, 202, 40);
    }
</style>
 

JavaScript:

 
    
// add before family.load()
family.onExportStart((args) => {
    args.styles += document.getElementById('myStyles').outerHTML;
});
 
Code example:

Here is a code demo on how to export a background image.

Use return false to avoid exporting:

 
    
// add before family.load()
family.onExportStart(() => {
    // add your code here
    return false;
});