Laravel: Попытка сгенерировать pdf с диаграммами, но на сгенерированных pdf диаграммах не отображается - PullRequest
Новая
       6

Laravel: Попытка сгенерировать pdf с диаграммами, но на сгенерированных pdf диаграммах не отображается

0 голосов
/ 31 августа 2018

Я установил laravel 5.6 и установил пакет barryvdh / laravel-dompdf. Я использовал какой-то плагин jquery для отображения диаграммы в блейд-файле, он работает нормально. Используя пакет dompdf, я пытаюсь показать эту круговую диаграмму в pdf, но диаграммы не отображаются в pdf. Как отображать графики в формате PDF, есть ли решение для отображения графиков при потоковой передаче / загрузке pdf .?

Плагин / библиотека диаграмм показывает следующую диаграмму при просмотре в файле блейда:

chart

Я пытаюсь показать этот график в потоковом режиме / скачал pdf

Коды приведены ниже:
Код контроллера: 

public function generate_pdf(){

        $data = [
        'foo' => 'bar'
    ];


    //return view('pdf');

    $pdf = PDF::loadView('pdf', $data);
    return $pdf->stream('document.pdf');
}

pdf.blade.php код: 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Create</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="{{ asset('public/js/piechart.js') }}"></script>


    <script>

window.onload = createPieChart;
function createPieChart() {

    var pieChart = new PieChart( "piechart", 
        {
            includeLabels: true, 
            data: [40, 250, 70],
            labels: ["11%", "69.6%", "17.4%"],
            colors: [
                ["#FFDAB9", "#FFDAB9"],
                ["#E6E6FA", "#E6E6FA"],
                ["#E0FFFF", "#E0FFFF"]
            ]
        }
    );

    pieChart.draw();

}
</script>

    </head>
    <body>

    <canvas id="piechart" width="400" height="400">
    </canvas>

    </body>
</html>

1 Ответ

0 голосов
/ 31 августа 2018

Классическая проблема - Нет простого решения

Это классическая проблема. Это влияет на множество различных инструментов, а не только на dompdf. Есть как минимум три проблемы:

  • Javascript

Инструмент на стороне сервера может работать с сгенерированным HTML, но не обычно запускает Javascript. Он интерпретирует HTML и CSS, как если бы это был браузер с отключенным Javascript, и поэтому jQuery и множество других библиотек Javascript просто не работают, поэтому любую графику, созданную на стороне клиента, невозможно захватить.

Клиентский инструмент может запускаться после завершения всего Javascript (jQuery или иным образом). Однако есть и другие проблемы ...

  • SVG (и другая графика)

Существует несколько способов визуализации графики в браузере. Старомодным способом является создание графики на сервере и загрузка изображений jpg или png в браузер. Однако это не обеспечивает динамические диаграммы (в любом случае это не легко), подробные действия при наведении курсора и т. Д. Поэтому большинство сайтов теперь используют SVG или другую систему на стороне клиента. SVG поддерживается всеми (или почти всеми) современными браузерами, поэтому он в значительной степени заменил старые методы. SVG (а также более старые методы) НЕ легко записать для рендеринга в PDF или другой документ. В результате, даже в клиентских системах вы, как правило, будете иметь «дыры» в графике.

  • Разрешение

При создании SVG-диаграммы на стороне клиента размер определяется в зависимости от разрешения экрана. Если вам удастся захватить эту диаграмму вместе с HTML, текст будет иметь высокое разрешение (потому что это текст и может рассматриваться как текст в PDF с масштабируемыми шрифтами), но графика будет ограничена разрешением, как было изначально нарисовано. Это хорошо для случайного использования, но может не обеспечивать нужного или желаемого качества при печати на высококачественном принтере. Типичное разрешение экрана составляет ~ 100 точек на дюйм, типичное разрешение принтера составляет ~ 200 точек на дюйм - 300 точек на дюйм (номинальное значение намного выше, но с практической точки зрения цветные изображения, отображаемые с разрешением 200 точек на дюйм или более, обычно являются удовлетворительными, за исключением фотографий художественного качества).

Захват изображения виртуального браузера

Лучшее решение, которое я нашел на данный момент, - это использование виртуального или «безголового» браузера для создания всего - запуска Javascript и вывода SVG вместе с HTML и CSS. Затем запишите вывод в виде изображения с высоким разрешением, чтобы вставить его в свой PDF. Вы можете использовать любой серверный framework / toolkit / etc. чтобы сделать захват и создать PDF.

Доступны бесплатные пакеты с открытым исходным кодом. Вероятно, наиболее популярным является PhantomJS , но я только что проверил, и в настоящее время он заархивирован / не активен. Я использовал его, и это сработало, но у меня было немало проблем.

Также доступны различные услуги. В настоящее время я использую URLBox.io . У меня нет личной заинтересованности в этом - просто очень довольный клиент. Он включает в себя опцию (в зависимости от типа подписки) для сохранения изображений в Amazon S3, или вы можете сделать снимок локально. Для меня наиболее важно то, что вы можете установить очень высокое разрешение, чтобы захваченные изображения действительно выглядели великолепно. Я использую его в первую очередь для автоматической вставки изображений веб-страниц в PDF-файлы.

...