Tworzenie raportów PDF za pomocą wykresu flot

Question

Próbuję zaimplementować automatyczne narzędzie do generowania raportów dla moich klientów. Potrzebuję tworzyć raporty w formacie pdf i bardzo mi się podoba tworzenie wykresów przy użyciu flopu Jquery. Potrzebuję tylko sposobu, aby uzyskać wykresy w pliku pdf.

Próbowałem za pomocą latający spodek (xhtmlrenderer) do przechwytywania obrazu wykresu, ale nie wydaje mi pomóc jak wykresy tworzone przez JavaScript.

czy xhtmlrenderer może przechwycić elementy utworzone za pomocą javascript?

lub czy jest to jakiekolwiek inne narzędzie, które może uchwycić obraz wykresu?

Answer 1

Flot rysuje swój wykres na elemencie HTML5 <canvas>. Więc możliwy scenariusz może być następujący:

1. Pobieranie danych graficznych z płótna z toDataURL jak opisano w this answer.
2. Utwórz plik PDF za pomocą jsPDF, użyj addImage, jak w pierwszym przykładzie, aby osadzić w nim obraz.

ALE uwaga, w tym scenariuszu nie będzie widać żadnych etykiety osi w obrazie, ponieważ nie są one wystawione na płótnie, są one proste <div> elementy umieszczone z position:relative. Znalazłem this post, gdzie autor oferuje wtyczkę Flota, która zmusza Flot do narysowania tekstu na płótnie, ale nie mam pojęcia, czy to działa.UPD: Rysowanie etykiet na płótnie jest zawarte w nadchodzącym wydaniu 0.8 (zobacz komentarze).

ALElegenda również nie jest narysowane na płótnie, to także odpowiednio umieszczone <div>. Wygląda na to, że ludzie w społeczności Flota próbują coś z tym zrobić, znalazłem dwa żądania ściągnięcia, the first modyfikowanie rdzenia, the other wprowadzenie wtyczki. Żadna z nich nie jest scalana przez około 9 miesięcy i są one oznaczone jako etap v. 0.9, który jest następny i nie ma terminu. Przynajmniej można sklonować te repozytoriów i przetestować ich pracę.

skrócie: wielu ludzi na całym Flot zajmują się tym problemem, ale niestety nie jest stabilny, out-of-box sposób to zrobić jeszcze - tylko nadzieja, że ​​0.9 będzie w końcu wyjdzie czasami z tym problemem zaadresowany.

Answer 2

Jeśli możesz zrobić to na serwerze i jesteś w systemie opartym na Uniksie, chciałbym spróbować wkhtmltopdf.

edytuje po pewnym czasie

Teraz dni, aby to zrobić serverside użyłbym niesamowite phantomjs. Używam tego od pewnego czasu w projekcie opartym na flocie i działa idealnie.

Answer 3

Połączyłem JSFiddle z przykładem, jak to zrobić z Flot + Html2Canvas + jsPDF. Wyeksportowany plik PDF zawiera oś, legendę itp.:

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