2

Treant.js Chart

I am using Treant.js javascript library to create an organisational chart, and jsPDF (along with html2pdf.js and canvg.js) to convert the chart to PDF. Yo convert the SVG elements (the lines that connect the boxes) and HTML contents (the boxes) to PDF, I use the following code:

var useWidth = $( '#orgchart' ).prop( 'scrollWidth' );
var useHeight = $( '#orgchart' ).prop( 'scrollHeight' );

var pdf;

if ( useHeight > useWidth ) {
    pdf = new jsPDF( 'p', 'px', [
            useWidth, useHeight
    ] );
} else if ( useHeight <= useWidth ) {
    pdf = new jsPDF( 'l', 'px', [
            useHeight, useWidth
    ] );
}

var c = pdf.canvas;

var svgTags = document.querySelectorAll( '#orgchart svg' );
for ( var i = 0; i < svgTags.length; i++ ) {
    var svgTag = svgTags[ i ];

    if ( useHeight > useWidth ) {

        canvg( c, svgTag.outerHTML, {
            scaleWidth : useWidth,
            scaleHeight : useHeight,
            offsetX : 0,
            offsetY : 0,
            ignoreMouse : true,
            ignoreAnimation : true,
            ignoreClear : true,
            ignoreDimensions : true
        } );

    } else if ( useHeight <= useWidth ) {

        canvg( c, svgTag.outerHTML, {
            scaleWidth : useHeight,
            scaleHeight : useWidth,
            offsetX : 0,
            offsetY : 0,
            ignoreMouse : true,
            ignoreAnimation : true,
            ignoreClear : true,
            ignoreDimensions : true
        } );
    }

}

html2pdf( window.document.getElementById( "orgchart" ), useWidth, useHeight, pdf, function ( pdf ) {
    pdf.output( 'dataurlnewwindow' );
} );

As you can see, I am using html2pdf.js to convert html to pdf, and canvg.js to convert svg to canvas. Below is the output that I get:

Treant.js Chart jsPDF render

Issues in this are:

  • SVG not aligned with HTML.
  • Font in pdf is smaller than its HTML counterpart.
  • Weird word spacing in PDF.

I expected the SVG to be in alignment with HTML. I expected font to be rendered properly (I am ignoring the font style since I am using google fonts in my html and it's not supported in PDFs).

Is there any available fix to render SVG + HTML to PDF properly?

Tanuj Dhaundiyal
  • 183
  • 1
  • 2
  • 15

0 Answers0