" /> " /> "/>

Generate a PDF with TCPDF including and ECHARTS

22 Views Asked by At

I need to generate a PDF file that includes an ECHARTS in it.

I'm trying something like this:

    <script src="../x/plugins/echarts/echarts.js"></script>
<script src="../x/plugins/echarts/theme/sicon.js"></script>

<div id="main" style="width: 100%;height:550px;"></div>

<script type="text/javascript">
    <?=$SYSTEM_SCRIPT_COPYRIGHT?>

    // In SSR mode the first container parameter is not required
    let chart = echarts.init(null, null, {
      renderer: 'svg', // must use SVG rendering mode
      ssr: true, // enable SSR
      width: 400, // need to specify height and width
      height: 300
    });

    // use setOption as normal
    chart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
    });

    // Output a string
    const svgStr = chart.renderToSVGString();

    document.getElementById("main").innerHTML = svgStr;

    // If chart is no longer useful, consider disposing it to release memory.
    chart.dispose();
    chart = null;        

</script>        


<?php
$html = !!! THE ECHARTS OBJECT HERE IN HRML !!!;
// Include the main TCPDF library (search for installation path).
require_once('../lib/tcpdf/tcpdf.php');
// create new PDF document
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
// set document information
$pdf->SetCreator(PDF_CREATOR);
// remove default header/footer
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
// set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
// set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
// set font
$pdf->SetFont('times', 'BI', 20);
// add a page
$pdf->AddPage();
// add HTML
$pdf->writeHTML($html);
//Close and output PDF document
$pdf->Output('example_002.pdf', 'I');
?>

But obviously it is not working as expected. The idea is to generate an ECHARTS object converting the result in HTML and then pass it to the TCPDF object to incorporate it.

I was thinking about an AJAX function or some kind of function called at the right time to the PHP main page to obtain the ECHARTS back.

Is there a way to achieve my target?

Thanks

0

There are 0 best solutions below