Erstellen von PDF-Berichten mit Flot-Diagramm

Question

Ich versuche, ein automatisches Berichterstellungs-Tool für meine Kunden zu implementieren. Ich muss Berichte im PDF-Format erstellen und ich bin sehr komfortabel beim Erstellen von Diagrammen mit Jquery Flot. Ich brauche nur einen Weg, um die Graphen in das PDF zu bekommen.

Ich versuchte mit fliegende Untertasse (Xhtmlrenderer), um das Bild des Diagramms zu erfassen, aber es scheint mir nicht zu helfen, da die Grafiken von Javascript erstellt werden.

Kann xhtmlrenderer die Elemente erfassen, die mit Javascript erstellt wurden?

oder ist es ein anderes Werkzeug, das das Bild des Graphen erfassen kann?

Answer 1

Flot zeichnet seine Grafik auf HTML5 <canvas> Element. So könnte das mögliche Szenario wie folgt sein:

1. Abrufen von Bilddaten aus Leinwand mit toDataURL wie in this answer beschrieben.
2. Erstellen Sie ein PDF mit jsPDF, verwenden Sie addImage wie im ersten Beispiel, um das Bild einzubetten.

ABER Notiz, in diesem Szenario Sie keine Achsenbeschriftungen in Bild sehen werden, weil sie nicht auf Leinwand gezogen werden, sie sind einfach <div> Elemente mit position:relative positioniert. Ich fand this post, wo der Autor ein Flotplugin anbietet, das Flot zwingt, Text auf Leinwand zu zeichnen, aber ich habe keine Idee, ob es funktioniert.UPD: Das Zeichnen von Etiketten auf Leinwand ist in der kommenden Version 0.8 enthalten (siehe Kommentare).

ABER die Legende ist auch nicht auf Leinwand gezogen, es ist auch ein richtig positioniert <div>. Scheint wie Leute in der Flot-Community versuchen, etwas damit zu tun, habe ich zwei Pull-Anfragen gefunden, the first Modifizierung des Kerns, the other Einführung eines Plugins. Keiner von ihnen ist seit etwa 9 Monaten zusammengeführt, und sie sind für v. 0,9 Meilenstein markiert, der nach-next ist und kein Fälligkeitsdatum hat. Zumindest ist es möglich, diese Leute Repos zu klonen und ihre Arbeit zu testen.

Diskussionsforum viele Leute um Flot sind mit diesem Problem betroffen, aber leider gibt es keine stabilen, Out-of-Box, wie es noch zu tun - nur die Hoffnung, dass 0,9 endlich mal mit dieser Frage kommen adressiert.

Answer 2

Wenn Sie dies serverseitig tun können und Sie auf einem Unix-basierten System sind, würde ich versuchen wkhtmltopdf.

EDITS nach einiger Zeit

Nun wird ein Tag, diese Serverside tun ich die großartige phantomjs verwenden würde. Ich verwende das schon seit einiger Zeit auf einem Flot-basierten Projekt und es funktioniert perfekt.

Answer 3

Ich habe ein JSFiddle mit einem Beispiel zusammengestellt, wie man das mit Flot + Html2Canvas + jsPDF erreichen kann. Die exportierte PDF enthält Achsen, Legenden usw.:

html2canvas($("#placeholder").get(0), { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 

    var imgData = canvas.toDataURL('image/png'); 
    var doc = new jsPDF('landscape'); 

    doc.addImage(imgData, 'PNG', 10, 10, 190, 95); 
    doc.save('sample-file.pdf'); 
    } 
}); 

JS Fiddle