如何在php中使用dompdf和chart.js库将动态图表导出为pdf？

编程问答 2022-04-24

问题描述

我使用chart.js库创建了图表，使用PHP MysqL创建了动态数据。

下面是我从数据库中获取数据的PHP代码。

<?PHP  
    $con =   new MysqLi('localhost','root','','pdf_test') or die("connection Failed");
    $result = MysqLi_query($con,"SELECT designation,count(*) as total FROM tbl_employee GROUP BY designation");
    $result_array=[];
    foreach($result as $row) {
        $item_array = array(
            'designation'   =>  $row['designation'],'total'         =>  $row['total'],'color'         =>  '#'.rand(100000,999999).''
        );
        array_push($result_array,$item_array);
    }
?>

下面是我的HTML代码来显示图表和导出按钮

<div class="container" id="designationWiseGraph">  
    <div class="panel panel-default">
        <div class="panel-body" align="center">
            <div class="row">
                <canvas id="pie_chart"></canvas>
            </div>
        </div>
    </div>
</div>
<br/>
<div align="center">
    <form method="post" id="generateDesignationPdf" action="create_pdf.PHP">
        <input type="hidden" name="hidden_html" id="hidden_html" />
        <button type="button" name="create_pdf" id="exportDesignation" class="btn btn-primary btn-xs">Export to PDF</button>
    </form>
</div>

下面是生成图形的javascript代码

<script>
    $(document).ready(function(){
        $('#exportDesignation').click(function(){
            $('#hidden_html').val($('#designationWiseGraph').html());
            $('#generateDesignationPdf').submit();
        });
     });

    var data = <?PHP echo json_encode($result_array); ?>;
    var designation = [];
    var total = [];
    var color =[];

    for(var i in data) {
        designation.push(data[i].designation);
        total.push(data[i].total);
        color.push(data[i].color);
    }
    var chart_data = {
        labels:designation,datasets:[
            {
                label:'Designation',backgroundColor:color,color:'#fff',data:total
            }
        ]
    };
    var chart = $('#pie_chart');
    var graph1 = new Chart(chart,{
        type:"pie",data:chart_data
    });
</script>

下面是我的 create_pdf.PHP 代码

<?PHP
    require_once 'vendor/autoload.PHP';

    use Dompdf\Dompdf;

    class Pdf extends Dompdf {
        public function __construct(){
            parent::__construct();
        }
    }

    if(isset($_POST["hidden_html"]) && $_POST["hidden_html"] != ''){
        $file_name = time().'_pdf_chart.pdf';
        $html = '<link rel="stylesheet" href="bootstrap.min.css">';
        $html .= $_POST["hidden_html"];

        $pdf = new Pdf();
        $pdf->load_html($html);
        $pdf->render();
        $pdf->stream($file_name,array("Attachment" => false));
    }

?>

正在生成 PDF 文件，但图表正在以 pdf 文件格式导出。

关于使用 dompdf 库或 tcpdf 库将图表导出为 pdf 的任何建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

tcpdf