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?
Sie Ihre Frage auf Englisch stellen sollten: http://stackoverflow.com/help/how- zu fragen – Danmoreng