将 canvas 转换为图像以使用 barryvdh/laravel-dompdf 导出为 PDF 无效

Question

我有问题。我在 Laravel 上，我需要将 HTML 页面导出为 PDF。所以我正在使用 barryvdh/laravel-dompdf，我尝试导出一些数据和图像并且它工作正常。事实上，我需要将折线图 Canvas 导出为 PDF，因此我之前将 canvas 转换为图像，它在我的视图中有效，但在我的 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);

当我导出时，我的 canvas 没有显示出来，但在我看来，我的 canvas 是一张图片，我的代码中有什么我没有看到的错误吗？提前致谢！

Answer 1

您正在尝试通过 php 和 dompdf 解释 Javascript，这是不可能的，因为他们不会，因为他们不支持该功能。

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

NodeJS + PhantomJS（不太复杂的解决方案）
Selenium (Java) + Facebook 网络驱动程序
wkhtmltopdf 或 wkhtmltoimage（canvas 插件渲染有问题）
为图表使用原生 php 库

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

Answer 2

试试这个将 canvas 转换成 PDF 文件 print angular(typescript)

    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+'">' );
    }
}

将 canvas 转换为图像以使用 barryvdh/laravel-dompdf 导出为 PDF 无效

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

javascript

dompdf

laravel