2014-12-30 19 views
10

jspdf kullanarak svg öğesini pdf'ye dönüştürmede sorun yaşıyorum. Bunu yapmak için eklentiyi https://github.com/CBiX/svgToPdf.js/ kullanarak kullanın.jspdf kullanarak Pdf'ye dönüştürün Svg

Aşağıda benim kod

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

Bu boş pdf generarting olmasıdır. Lütfen canvg'u kullanarak

+0

svgToPdf sadece g, çizgi, yönüne bağlı elips desteklemek , daire, metin elemanları ve birkaç özellik. Sadece basit bir demo olarak oynayın. – cuixiping

+0

@Priyesh Tiwari: pdf dönüştürme için aynı sorun svg alıyorum, sorununuzu nasıl çözdünüz? –

cevap

8

Yardım bölümünü kullanabilirsiniz.

Adım1: DOM

uzak dur "SVG" işaretleme kodu
var svg = document.getElementById('svg-container').innerHTML; 

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

Adım 2: kullanın canvg svg gelen tuval oluşturun.

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

Adım 3: .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'); 

burada demo kontrol http://jsfiddle.net/Purushoth/hvs91vpq/193/

Canvg Repo kullanarak tuval görüntüyü oluşturun: https://github.com/gabelerner/canvg

+0

JSFiddle'ınız Firefox'ta çalışmıyor (FF47 Windows ile denedim) – Basj

+0

Herhangi bir konsol hatası? @Basj – Purushoth

+0

"PDF Al" @ Purushoth'u tıkladığımda hiçbir şey olmuyor, burada 'ReferenceError: canvg tanımlı değil' hatası. Bağlantı, jsfiddle'ınızda doğru şekilde ayarlanmamış gibi görünüyor: https://gabelerner.github.io/canvg/canvg.js mevcut değil. Günceller misin? Şimdiden teşekkürler! – Basj

İlgili konular