Laravel：尝试使用图表生成pdf，但生成的pdf图表没有显示

问题描述 投票：0回答：1

我安装了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>
javascript laravel pdf pie-chart dompdf
1个回答
0
投票

Classic Problem - No Easy Fix

这是一个经典问题。它会影响许多不同的工具，而不仅仅是dompdf。至少涉及三个问题：

  • 使用Javascript

服务器端工具可以使用生成的HTML，但通常不运行Javascript。它解释HTML和CSS，好像它是一个禁用Javascript的浏览器，因此jQuery和许多其他Javascript库根本不起作用，因此任何生成客户端的图形都无法捕获。

客户端工具可以在所有Javascript（jQuery或其他）完成后运行。但是，还有其他问题......

  • SVG（和其他图形）

有许多方法可以在浏览器中呈现图形。老式的方法是在服务器上生成图形并将jpg或png图像下载到浏览器中。但是，这不提供动态图表（不容易），详细的鼠标悬停操作等。因此大多数站点现在使用SVG或其他客户端系统。所有（或几乎所有）当前浏览器都支持SVG，因此它已经在很大程度上取代了旧方法。 SVG（以及较旧的方法）不易捕获以呈现为PDF或其他文档。因此，即使使用客户端系统，您通常也会得到图形所在的“洞”。

  • 解析度

生成客户端SVG图表时，所有内容都根据您的屏幕分辨率进行调整。如果您设法将该图表与HTML一起捕获，则文本将是高分辨率的（因为它是文本并且可以被视为具有可缩放字体的PDF中的文本），但图形将限制为最初绘制的分辨率。这适用于临时使用，但在高质量打印机上打印时可能无法产生所需或所需的质量。典型的屏幕分辨率为~100dpi，典型的打印机分辨率为~200dpi-300dpi（额定值更高，但从实际角度来看，200dpi或更高的彩色图像通常是令人满意的，除了艺术品质的照片）。

Virtual Browser Image Capture

到目前为止，我发现的最佳解决方案是使用虚拟或“无头”浏览器来创建所有内容 - 运行Javascript并生成SVG输出以及HTML和CSS。然后将输出捕获为高分辨率图像以插入PDF。您可以使用任何服务器端框架/工具包/等。同时进行捕获并创建PDF。

有免费的开源软件包。可能最受欢迎的是PhantomJS，但我刚检查过，它目前已存档/未激活。我已经使用它并且它有效，但有很多问题。

还提供各种服务。我目前使用的是URLBox.io。我没有个人兴趣 - 只是一个非常满意的客户。它包括用于将图像保存到Amazon S3的选项（取决于订阅类型），或者您可以在本地捕获。对我来说最重要的是，您可以设置非常高的分辨率，以便捕获的图像看起来真的很棒。我主要用它来自动将网页图像插入到PDF中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.