Show / Hide Table of Contents

Export

Family Tree JS support the following export formats:

  • PDF - A PDF file can be viewed, shared, and printed on any platform provided that users have Adobe Acrobat, Adobe Reader, or a PDF-compatible reader installed on their computers. A PDF file can also be uploaded to an intranet or the Web. You can also export an individual node with his children or an entire Family Tree JS to a PDF file.
  • PNG - A PNG file is an image file stored in the Portable Network Graphic (PNG) format. It contains a bitmap of indexed colors and uses lossless compression, similar to a .GIF file but without copyright limitations. PNG files are commonly used to store graphics for web images.
  • SVG - SVG images and their related behaviors are defined in XML text files which means they can be searched, indexed, scripted and compressed. Additionally this means they can be created and edited with any text editor and with drawing software.
  • CSV - A Comma Separated Values (CSV) file is a plain text file that contains a list of data. These files are often used for exchanging data between different applications. For example, databases and contact managers often support CSV files.
  • JSON - JSON (JavaScript Object Notation) is a lightweight data-interchange format. The data that we load in the tree is in JSON format.

Adding export options

In order to enable PDF export you need to add node menu item in menu option and/or nodeMenu

 
    let family = new FamilyTree(document.getElementById("tree"), {
        menu: {
            pdf: { text: "Export PDF" },
            png: { text: "Export PNG" },
            svg: { text: "Export SVG" },
            csv: { text: "Export CSV" },
            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:

 
    function pdf(nodeId) {
       family.exportPDF({
            format: "A4"
       });
    }

    let family = new FamilyTree(document.getElementById("tree"), {
        menu: {
            export_pdf: {
                text: "Export PDF",
                icon: FamilyTree.icon.pdf(24, 24, "#7A7A7A"),
                onClick: pdf
            },
        }
        ...
    });
    

Add header and footer:

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

        let family = new FamilyTree(document.getElementById("tree"), {
            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.

 

    let family = new FamilyTree(document.getElementById("tree"), {
        ...
        menu: {
            export_pdf: {
                text: "Export PDF",
                icon: FamilyTree.icon.pdf(24, 24, "#7A7A7A"),
                onClick: pdf
            }
        },
    });

       function pdf(nodeId) {
           family.exportPDF({
            format: "A4",
            padding: 50
        });
       }
    

Fit to width:

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


PDF Preview

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

Profile export

You can export the profile (node details form) in PDF or PNG.

Example:

 
       family.exportPDFProfile({id: 5})

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

 
    let family = new FamilyTree(document.getElementById("tree"), {
        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/exportstart and onExportEnd/exportend to change the export behavior.

 
 let family = new FamilyTree(document.getElementById("tree"), {
 family.onExportStart(() => {
    ...
    return false; // to avoid export
 });
 family.load(nodes);
    

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:

 
       family.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,
                    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:

 
  family.on('exportstart', function(sender, args){
    args.styles += document.getElementById('myStyles').outerHTML;
  });
 


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

Use return false to avoid export:

 
  family.on('exportstart', function(sender, args){
   if (condition) {
        return false;
   }
  });