Creazione di report PDF con grafico flottante

Question

Sto cercando di implementare uno strumento di generazione automatica di report per i miei clienti. Ho bisogno di creare report in formato pdf e mi sto molto a mio agio nella creazione di grafici usando il jQuery flot. Ho solo bisogno di un modo per ottenere i grafici all'interno del pdf.

Ho provato ad utilizzare disco volante (xhtmlrenderer) per catturare l'immagine del grafico, ma non sembra aiutare me come i grafici creati da JavaScript.

can xhtmlrenderer può acquisire gli elementi creati con javascript?

o è il loro qualsiasi altro strumento in grado di catturare l'immagine del grafico?

Answer 1

Flot disegna il grafico sull'elemento HTML5 <canvas>. Quindi lo scenario possibile potrebbe essere il seguente:

1. recuperare i dati di immagine da tela con toDataURL come descritto in this answer.
2. Creare un PDF con jsPDF, utilizzare addImage come nel primo esempio per incorporare l'immagine in esso.

MA nota, in questo scenario non si vedrà alcun etichette degli assi in immagine, perché non sono disegnati su tela, sono semplici <div> elementi posizionati con position:relative. Ho trovato this post dove l'autore offre un plugin Flot che forza Flot a disegnare del testo su tela, ma non ho idea se funzioni.UPD: Le etichette di disegno su tela sono incluse nella versione 0.8 in arrivo (vedere i commenti).

MA il legenda inoltre non è disegnata su tela, è anche un posizionate correttamente <div>. Sembra che le persone della comunità di Flot stiano cercando di fare qualcosa con questo, ho trovato due richieste di pull, the first che modifica il core, the other introducendo un plugin. Nessuno dei due viene unito per circa 9 mesi e sono contrassegnati per la pietra miliare v. 0.9 che è successiva alla prossima e non ha una data di scadenza. Almeno è possibile clonare quei repository e testare il loro lavoro.

Riprendi: molte persone in tutto Flot si occupano di questo problema, ma purtroppo non c'è stabile, out-of-box modo per farlo - ancora solo la speranza che 0.9 sarà finalmente uscito a volte con questo problema indirizzata.

Answer 2

Se si può fare questo serveride e si è su un sistema basato su Unix, proverei wkhtmltopdf.

EDITS dopo qualche tempo

Ora un giorno, per fare questo serverside Vorrei utilizzare il impressionante phantomjs. L'ho usato su un progetto basato su flottazione per un po 'di tempo e funziona perfettamente.

Answer 3

Ho creato un JSFiddle con un esempio di come ottenere ciò con Flot + Html2Canvas + jsPDF. Il PDF esportato include assi, legende, ecc.:

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