Создание PDF-отчетов с помощью flot graph

Я пытаюсь реализовать автоматический инструмент генерации отчетов для своих клиентов . Мне нужно создавать отчеты в формате pdf, и мне очень удобно создавать графики с помощью jQuery flot. Мне просто нужен способ получить графики внутри pdf.

Я пробовал использовать летающая тарелка (xhtmlrenderer) для захвата изображения графика, но это, похоже, не помогает мне, поскольку графики создаются javascript.

может xhtmlrenderer захватить элементы создано с помощью javascript ?

или любой другой инструмент, который может захватить изображение графа ?

9
flot javascript jquery pdf xhtmlrenderer

3 ответов

Flot рисует свой график на HTML5 <canvas> элемент. Таким образом, возможный сценарий может быть следующим:

  1. получить данные изображения с холста с toDataURL как описано в ответ.
  2. создать PDF с jsPDF используйте addImage как в первом примере, чтобы вставить изображение в него.

но обратите внимание, в этом случае вы не увидите никаких меток оси в изображении, потому что они не нарисованы на холст, они простые <div> элементы расположены с position:relative. Я нашел этот пост где автор предлагает плагин Flot, который заставляет Flot рисовать текст на холсте, но я понятия не имею, работает ли он. UPD: рисование этикеток на холсте включено в приближающийся выпуск 0.8 (см. комментарии).

но2 the легенда также не нарисован на холсте, он также правильно расположен <div>. Кажется как люди в сообществе Flot пытаются что-то сделать с этим, я нашел два запроса pull, первый изменение, другое вводим плагин. Ни один из них не объединяется в течение 9 месяцев,и они отмечены для V. 0.9 milestone, который является следующим и не имеет срока. По крайней мере, можно клонировать этих людей и протестировать их работу.

резюме: многие люди вокруг Flot обеспокоены этот вопрос, но, к сожалению, пока нет стабильного, нестандартного способа сделать это - только надежда, что 0.9, наконец, выйдет иногда с этой проблемой.

9

Я собрал JSFiddle с примером того, как это сделать с помощью Flot + Html2Canvas + jsPDF. Экспортированный PDF включает ось, легенду и т. д.:

 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

5

Если вы можете сделать это на сервере, и вы находитесь в системе на базе Unix, я бы попробовал wkhtmltopdf.

РЕДАКТИРОВАНИЕ ЧЕРЕЗ НЕКОТОРОЕ ВРЕМЯ

теперь дни, чтобы сделать это serverside я бы использовать удивительный помощи PhantomJS. Я использую это в проекте на основе flot в течение некоторого времени, и он отлично работает.

3