2

Treant.js 图表

我正在使用Treant.js javascript 库创建组织结构图，并使用 jsPDF（连同 html2pdf.js 和 canvg.js）将图表转换为 PDF。将 SVG 元素（连接框的线）和 HTML 内容（框）转换为 PDF，我使用以下代码：

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' );
} );

如您所见，我使用 html2pdf.js 将 html 转换为 pdf，并使用 canvg.js 将 svg 转换为画布。下面是我得到的输出：

Treant.js 图表 jsPDF 渲染

这方面的问题是：

  • SVG 未与 HTML 对齐。
  • pdf 中的字体小于其 HTML 对应字体。
  • PDF中奇怪的字间距。

我希望 SVG 与 HTML 保持一致。我希望字体能够正确呈现（我忽略了字体样式，因为我在我的 html 中使用了谷歌字体并且它在 PDF 中不受支持）。

是否有任何可用的修复程序可以正确地将 SVG + HTML 渲染为 PDF？

4

0 回答 0