2016-05-31 11 views
-2

verwendete ich html2canvas ein PDF von HTML erstellenExport html pdf in Javascript


Ergebnis: wird die Karte ohne den Pfad zu erzeugen
Hier ist, was ich habe:

html2canvas(document.getElementById('pdf-canvas'), { 
     onrendered: function (canvas) { 
      var data = canvas.toDataURL("image/png"); 
      var docDefinition = { 
       content: [{ 
        image: data, 
        width: 500, 
       }] 
      }; 
      pdfMake.createPdf(docDefinition).download("Score_Details.pdf"); 
     } 
    }); 

Dann habe ich canvg und fabric


Ergebnis: Es ist der Weg zu erzeugen, ohne die Karte
Hier ist, was ich habe

1)fabric 

var canvas = new fabric.StaticCanvas(undefined, { 
    width: 500, 
    height: 500, 
}); 
var svgEl = document.body.getElementsByTagName('svg')[0]; 
var serializer = new XMLSerializer(); 
var svgStr = serializer.serializeToString(svgEl); 
var path = fabric.loadSVGFromString(svgStr,function(objects, options) {  
    var obj = fabric.util.groupSVGElements(objects, options); 
    canvas.add(obj).renderAll();  
    var data = canvas.toDataURL();  
    var docDefinition = { 
     content: [{ 
      image: data, 
      width: 500, 
     }] 
    }; 
    pdfMake.createPdf(docDefinition).download("Score_Details.pdf"); 
}); 

2)canvg 

var svgImage = document.body.getElementsByTagName('svg')[0]; 
var serializer = new XMLSerializer(); 
var str = serializer.serializeToString(svgImage); 
var $canvas = $('<canvas/>'); 
$canvas.attr('width', '150px;') 
$canvas.attr('height', '150px;') 
$canvas.appendTo('body'); 
canvg($canvas.get(0), str); 


html2canvas($canvas, { 
    onrendered: function (canvas) { 
    var a = document.createElement('a'); 
    a= canvas.toDataURL(); 
    var docDefinition = { 
     content: [{ 
      image: a, 
      width: 500, 
     }] 
    }; 
    pdfMake.createPdf(docDefinition).download("Score_Details.pdf"); 
    $canvas.remove(); //removes canvas from body 
    } 
}); 

Muss ich eine andere Bibliothek verwenden, oder habe ich etwas verpasst mit html2canvas, canvg und Gewebe?

+0

Sie Ihre Frage auf Englisch stellen sollten: http://stackoverflow.com/help/how- zu fragen – Danmoreng

Antwort

0

Ich habe eine Bibliothek zum Exportieren in PDF-Datei gefunden, Sie können es versuchen. jsPDF

+0

Ich habe diese Bibliothek versucht, aber diese Auflösung löst mein Problem nicht. Der Pfad wird nicht generiert. – amira

+0

Können Sie Ihren Code jetzt teilen? – TOM

0

J'ai testé jsPDF mais j'arrive toujours pas à générer le Trajet Voici le code

html2canvas(document.getElementById("pdf-canvas"), { 
    onrendered: function(canvas) { 

     var imgData = canvas.toDataURL('image/png'); 
     console.log('Report Image URL: '+imgData); 
     var doc = new jsPDF('p', 'mm', [297, 210]); //210mm wide and 297mm high 

     doc.addImage(imgData, 'PNG', 10, 10); 
     doc.save('sample.pdf'); 
    } 
});