Convert a canvas to image to export in PDF with barryvdh/laravel-dompdf isn't working

Question

I've got an issue. I'm on Laravel and I need to export a HTML page to PDF. So I'm using barryvdh/laravel-dompdf, I tried to export some datas and images and it works fine. The fact is I need to export a LineChart Canvas to PDF, so I convert the canvas to image before, it works in my view but not in my PDF. I use this script to make graphs : https://mdbootstrap.com/javascript/charts/

Here's my code :

// 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);

When I export, my canvas doesn't show up, but in my view, my canvas is an image, is anything I didn't see wrong in my code ? Thanks in advance !

Answer 1

你试图通过php和dompdf来解释Javascript，但不可能，因为他们不会，因为他们不支持该功能。

您应该使用其他实用程序来执行将创建图像的javascript，例如：

• NodeJS + PhantomJS（不太复杂的解决方案）
• Selenium（Java）+ Facebook webdriver
• wkhtmltopdf或wkhtmltoimage（画布插件有问题）
• 使用本机php库进行图表

这些实用程序将允许您渲染页面并获取要导出为PDF的图像，甚至可以直接从某些主题获取PDF。

Answer 2

尝试使用此工具将画布转换为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+'">' );
    }
}