2014-12-30 22 views
10

Ho problemi nel rendering dell'elemento svg in pdf usando jspdf. Iam utilizzando il plugin https://github.com/CBiX/svgToPdf.js/ per farlo.Render da Svg a Pdf usando jspdf

Qui di seguito è il mio codice

// 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 

Si generarting PDF vuoto. Please help

+0

svgToPdf supportare solo g, linea, rect, ellisse , cerchio, elementi di testo e alcuni attributi. Gioca come una semplice demo. – cuixiping

+0

@Priyesh Tiwari: sto ottenendo lo stesso problema svg alla conversione pdf, come hai risolto il tuo problema? –

risposta

8

È possibile farlo utilizzando canvg.

Step1: Get "SVG" codice di markup da DOM

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

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

Fase 2: Usa canvg per creare tela SVG.

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

Fase 3: Crea immagine da tela utilizzando .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'); 

Controllare la demo qui http://jsfiddle.net/Purushoth/hvs91vpq/193/

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

+0

Il tuo JSFiddle non funziona su Firefox (ho provato con FF47 Windows) – Basj

+0

Qualche errore della console? @Basj – Purushoth

+0

Non succede nulla quando clicco su "Ottieni PDF" @Purushoth, ecco l'errore "ReferenceError: canvg is not defined". Sembra che il link non sia impostato correttamente nel tuo jsfiddle: https://gabelerner.github.io/canvg/canvg.js non esiste. Potresti aggiornarlo? Grazie in anticipo! – Basj