Преобразование холста в изображение для экспорта в PDF с помощью barryvdh / laravel-dompdf не работает - PullRequest
Новая
       3

Преобразование холста в изображение для экспорта в PDF с помощью barryvdh / laravel-dompdf не работает

0 голосов
/ 04 июня 2018

У меня есть проблема.Я нахожусь на Laravel и мне нужно экспортировать HTML-страницу в PDF.Поэтому я использую barryvdh/laravel-dompdf, я пытался экспортировать некоторые данные и изображения, и это работает нормально.Дело в том, что мне нужно экспортировать Canvas LineChart в PDF, поэтому я конвертирую холст в изображение раньше, он работает в моем представлении, но не в моем PDF.Я использую этот скрипт для создания графиков: https://mdbootstrap.com/javascript/charts/

Вот мой код: 

// Controller code
public function pdf($name)
{
    $MyObject = Object::where('name', $name)->first()->toArray();
    $pdf = PDF::loadView('pdf.object', compact('object'));
    // If I want to return and test with my view I use this line
    return view('pdf.object', compact('object'));
    // If I want to download the pdf I use this line
    return $pdf->download($object['name'] . '.pdf');
}

// HTML Canvas + The script I use
<canvas id="myChart"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ asset('js/mdb.min.js') }}"></script>

// JS Code
var ctxL = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
    labels: ["label1","label2","label3"],
    datasets: [
        {
            label: "My first line",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            borderColor : "rgb(66, 40, 124)",
            pointBackgroundColor : "rgb(66, 40, 124)",
            pointHoverBorderColor : "rgb(66, 40, 124)",
            backgroundColor: "transparent",
            data: [15, 9, 13]
        },
        {
            label: "My second line",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            borderColor : "rgb(120, 60, 135)",
            pointBackgroundColor : "rgb(120, 60, 135)",
            pointHoverBorderColor : "rgb(120, 60, 135)",
            backgroundColor: "transparent",
            data: [3, 9, 4]
        }
       ]
    },
    options: {
       responsive: true,
       animation: false
    }    
});

var canvas = $('#myChart'); 
var dataURL = canvas.get(0).toDataURL();
var img = $("<img style='width:100%;height:auto;'></img>");
img.attr("src", dataURL);
canvas.replaceWith(img);

Когда я экспортирую, мой холст не отображается, но, на мой взгляд, мой холстизображение, что-то, что я не видел неправильно в моем коде?Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Попробуйте это для преобразования холста в PDF-файл. Печать угловая (машинопись) 

    downloadCanvas(){
            this.chart =document.getElementsByTagName('canvas')[0].toDataURL("Image/jpg");
            var img = new Image();
            img.src = this.chart;
            this.dev.nativeElement.insertAdjacentHTML('beforeend','<img src="'+img.src+'">' );
    }
}
0 голосов
/ 05 июня 2018

Вы пытаетесь интерпретировать Javascript через php и dompdf, что невозможно, так как это невозможно, поскольку они не поддерживают эту функцию.

Вам следует использовать другую утилиту, которая позволит вам выполнить javascript, который создаст образ, например:

  • NodeJS + PhantomJS (менее сложное решение)
  • Selenium (Java) + Facebook webdriver
  • wkhtmltopdf или wkhtmltoimage (есть проблемы с отрисовкой плагинов Canvas)
  • Использование нативной библиотеки php для диаграмм

Эти утилиты будутпозволяет вам визуализировать вашу страницу и получить изображение, которое вы хотите экспортировать в PDF, вы даже можете получить PDF непосредственно из какой-то темы.

...