php-如何在Html2Pdf中添加ChartJS代码以查看图像

大佬教程收集整理的这篇文章主要介绍了php-如何在Html2Pdf中添加ChartJS代码以查看图像，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在使用Chart.js.

这是我的PHP文件,我使用过javascript,通过它我可以简单地创建图表并在此之后创建图表图像.

<script>

            function done(){

                    var url=myLine.toBase64Image();
                    document.getElementById("url").src=url;
            }


        var MONTHS = [<?PHP echo '"' . implode('","', array_reverse($close_date_arr)) . '"' ?>];


        var config = {
          type: 'line',
          data: {

            labels: [<?PHP echo '"' . implode('","', array_reverse($close_date_arr)) . '"' ?>],

            datasets: [{
              label: "<?PHP echo $asx_code ?>",
              BACkgroundColor: '#ff6384', 
              borderColor:'#ff6384', 

              data: [<?PHP echo '"' . implode('","', array_reverse($close_price_arr)) . '"' ?>],
              fill: false,
            }]
          },
          options: {
               bezierCurve : false,
      animation: {
        onComplete: done
      },
            responsive: true,
            title: {
              display: true,
              text: ''
            },
            tooltips: {
              mode: 'index',
              intersect: false,
            },
            hover: {
              mode: 'nearest',
              intersect: true
            },
            scales: {
              xAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: 'Month'
                }
              }],
              yAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: 'Value'
                }
              }]
            }
          }
        };


          var ctx = document.getElementById('canvascode').getContext('2d');
          window.myLine = new Chart(ctx, config);


        document.getElementById('randomizeData').addEventListener('click', function() {
          config.data.datasets.forEach(function(dataset) {
            dataset.data = dataset.data.map(function() {
              return randomScalingFactor();
            });

          });

          window.myLine.update();
        });

        var colorNames = Object.keys(window.chartColors);

      </script>

这绝对正常,但现在我在html2pdf中仍然做同样的事情.我想包含几个JS文件,并使用脚本标签生成图表,然后将图像放入PDF文件中.

这是我所做的一切,没有任何运气.

<?PHP 
require __DIR__.'/vendor/autoload.PHP';

use Spipu\Html2Pdf\Html2Pdf;
use Spipu\Html2Pdf\Exception\Html2PdfException;
use Spipu\Html2Pdf\Exception\ExceptionFormatter;


$html2pdf = new Html2Pdf();
$html2pdf->pdf->IncludeJS('Chart.bundle.js');
$html2pdf->pdf->IncludeJS('chart_utils.js');




$asx_code = 'CHK';

$url = 'https://www.asx.com.au/asx/1/share/' . $asx_code . '/prices?interval=daily&count=365';
  //  Initiate curl
$ch = curl_init();
// Disable SSL verification
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, falsE);
// Will return the response, if false it print the response
curl_setopt($ch, CURLOPT_RETURNTRANSFER, truE);
// Set the url
curl_setopt($ch, CURLOPT_URL, $url);
// Execute
$result = curl_exec($ch);
// Closing
curl_close($ch);

// Will dump a beauty json :3
$record_decode = json_decode($result);

$close_date_arr = array();
$close_price_arr = array();


    foreach ($record_decode->data as $current_data) {

        $close_price_arr[] = $current_data->close_price;

        $close_date_arr[] = date('F Y', strtotime($current_data->close_datE));


    }

$str = '<canvas id="canvascode" style="display:none"></canvas>
<img id="url" style="width:400px; height:400px" />';

?>

<script>

        function done(){

                var url=myLine.toBase64Image();
                document.getElementById("url").src=url;
        }


    var MONTHS = [<?PHP echo '"' . implode('","', array_reverse($close_date_arr)) . '"' ?>];


    var config = {
      type: 'line',
      data: {

        labels: [<?PHP echo '"' . implode('","', array_reverse($close_date_arr)) . '"' ?>],

        datasets: [{
          label: "<?PHP echo $asx_code ?>",
          BACkgroundColor: '#ff6384', 
          borderColor:'#ff6384', 

          data: [<?PHP echo '"' . implode('","', array_reverse($close_price_arr)) . '"' ?>],
          fill: false,
        }]
      },
      options: {
           bezierCurve : false,
  animation: {
    onComplete: done
  },
        responsive: true,
        title: {
          display: true,
          text: ''
        },
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        hover: {
          mode: 'nearest',
          intersect: true
        },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Month'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Value'
            }
          }]
        }
      }
    };


      var ctx = document.getElementById('canvascode').getContext('2d');
      window.myLine = new Chart(ctx, config);


    document.getElementById('randomizeData').addEventListener('click', function() {
      config.data.datasets.forEach(function(dataset) {
        dataset.data = dataset.data.map(function() {
          return randomScalingFactor();
        });

      });

      window.myLine.update();
    });

    var colorNames = Object.keys(window.chartColors);

  </script>

 <?PHP  
$html2pdf->writeHTML($str);
$html2pdf->output();

?>

尝试生成PDF文件时,出现错误消息,

有人可以指导我如何在这里生成脚本并将仅图像转换为PDF.

解决方法:

如错误消息所提示：您将在Github上转到Html2Pdf并在那里创建新的问题；为了将标记画布添加到库的下一个版本中-或尝试使用画布以外的其他方法来绘制图表；其他图表库也可以与div或svg标签一起使用.

好吧,请参见issue 372 …作者不打算添加标签画布.

因此,您只能解决例如.使用phantomJS创建画布的屏幕截图,然后将其用作静态图像资源,以便将其呈现为PDF.

大佬总结

以上是大佬教程为你收集整理的php-如何在Html2Pdf中添加ChartJS代码以查看图像全部内容，希望文章能够帮你解决php-如何在Html2Pdf中添加ChartJS代码以查看图像所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。