Laravel:Trying to generate pdf with charts but on generated pdf charts are not showing

问题

I have installed laravel 5.6 and and installed barryvdh/laravel-dompdf package. I have used some jquery chart plugin to show chart on blade file, it's works fine. By using dompdf package , I am trying to shown this piechart on pdf, but chart's are not showing on pdf. How to show charts on pdf, Is there any solution to show charts on streaming/download pdf.?

The chart plugin/library shows the following chart when viewing on blade file:

What I am trying is to show this chart on streaming/downloaded pdf

Codes are given below:
Controller Code:

public function generate_pdf(){

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


    //return view('pdf');

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

pdf.blade.php code:

<!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:

Classic Problem - No Easy Fix

This is a classic problem. It affects many different tools, not just dompdf. There are at least three issues involved:

Javascript

A server-side tool can work with generated HTML but does not normally run Javascript. It interprets the HTML and CSS as if it were a browser with Javascript disabled, and therefore jQuery and plenty of other Javascript libraries simply don't work, so any graphics produced client-side are impossible to capture.

A client-side tool can run after all Javascript (jQuery or otherwise) has completed. However, there are still other problems...

SVG (and other graphics)

There are a number of ways to render graphics in a browser. The old-fashioned way is to produce the graphics on the server and download jpg or png images into a browser. However, that does not provide dynamic charts (not easily anyway), detailed mouseover actions, etc. So most sites now use SVG or another client-side system. SVG is supported by all (or nearly all) current browsers, so it has largely replaced the older methods. SVG (and the older methods as well) is NOT easy to capture for rendering into a PDF or other document. As a result, even with client-side systems you will typically end up with "holes" where the graphics would be.

Resolution

When producing a client-side SVG chart, everything is sized based on your screen resolution. If you do manage to capture that chart together with HTML, the text will be high resolution (because it is text and can be treated as text in a PDF with scalable fonts) but the graphics will be limited to the resolution as originally drawn. That is fine for casual usage but may not produce the quality needed or desired when printing on a high-quality printer. Typical screen resolution is ~ 100dpi, typical printer resolution is ~200dpi - 300dpi (rated much higher, but from a practical standpoint color images render at 200dpi or greater are typically satisfactory except for art-quality photographs).

Virtual Browser Image Capture

The best solution I have found so far is to use a virtual or "headless" browser to create everything - running Javascript and producing SVG output along with HTML & CSS. Then capture the output as a high-resolution image to insert into your PDF. You can use any server-side framework/toolkit/etc. to both do the capture and create the PDF.

There are free open-source packages available. Probably the most popular is PhantomJS, but I just checked and it is currently archived/not active. I have used it and it worked, but had quite a few issues.

There are also various services available. One I currently use is URLBox.io. I have no personal interest in it - just a very satisfied customer. It includes the option (depending on subscription type) for saving images to Amazon S3, or you can capture locally. Most important, for me, is that you can set very high resolution so that captured images really look great. I use it primarily for automated insertion of images of web pages into PDFs.

来源：https://stackoverflow.com/questions/52118541/laraveltrying-to-generate-pdf-with-charts-but-on-generated-pdf-charts-are-not-s

标签

javascript

laravel

pdf

pie-chart

dompdf