2014-12-30 12 views
10

Ich habe Probleme beim Rendern von SVG-Element zu PDF mit jspdf. Ich benutze das Plugin https://github.com/CBiX/svgToPdf.js/, um dies zu tun.Render Svg zu Pdf mit jspdf

Unten ist mein Code

// I recommend to keep the svg visible as a preview 
var tmp = document.getElementById("chartContainer"); 
var svgDoc = tmp.getElementsByTagName("svg")[0]; 
var pdf = new jsPDF('p', 'pt', 'a4'); 
svgElementToPdf(svgDoc, pdf, { 
scale: 72/96, // this is the ratio of px to pt units 
removeInvalid: false // this removes elements that could not be translated to pdf from the source  svg 
}); 
pdf.output('datauri'); // use output() to get the jsPDF buffer 

Es ist generarting leer pdf. Bitte helfen

+0

svgToPdf unterstützen nur g, Linie, rect, Ellipse , Kreis, Textelemente und einige Attribute. Spielen Sie es einfach als einfache Demo. – cuixiping

+0

@Priyesh Tiwari: Ich habe das gleiche Problem svg zu PDF-Konvertierung, wie hast du dein Problem gelöst? –

Antwort

8

Sie können tun, dass canvg verwenden.

Schritt 1: Get "SVG" Markup-Code von DOM

var svg = document.getElementById('svg-container').innerHTML; 

    if (svg) 
    svg = svg.replace(/\r?\n|\r/g, '').trim(); 

Schritt 2: Verwenden canvgLeinwand aus dem SVG zu erstellen.

var canvas = document.createElement('canvas'); 
    canvg(canvas, svg); 

Schritt 3: aus Leinwand erstellen Bild mit .toDataURL()

var imgData = canvas.toDataURL('image/png'); 
    // Generate PDF 
    var doc = new jsPDF('p', 'pt', 'a4'); 
    doc.addImage(imgData, 'PNG', 40, 40, 75, 75); 
    doc.save('test.pdf'); 

die Demo Check http://jsfiddle.net/Purushoth/hvs91vpq/193/

Canvg Repo: https://github.com/gabelerner/canvg

+0

Ihr JSFiddle funktioniert nicht mit Firefox (Ich versuchte es mit FF47 Windows) – Basj

+0

Irgendwelche Konsolenfehler? @Basj – Purushoth

+0

Nichts passiert, wenn ich auf "Get PDF" @Purushoth klicke, hier ist der Fehler "ReferenceError: canvg ist nicht definiert". Es scheint, dass der Link in Ihrer jsfiddle nicht richtig eingestellt ist: https://gabelner.github.io/canvg/canvg.js existiert nicht. Könnten Sie es aktualisieren? Danke im Voraus! – Basj