Как добавить код ChartJS в Html2Pdf для просмотра изображения

Я использую 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 и сгенерировать свою диаграмму с помощью тега script, а затем поместить изображение в свой файл 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-файл, я получаю сообщение об ошибке:

Fatal error: Uncaught Spipu\Html2Pdf\Exception\HtmlParsingException: The html tag [canvas] is not known by Html2Pdf. You can create it and push it on the Html2Pdf GitHub project. in /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php:1435 Stack trace: #0 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(1043): Spipu\Html2Pdf\Html2Pdf->_executeAction(Object(Spipu\Html2Pdf\Parsing\Node)) #1 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(749): Spipu\Html2Pdf\Html2Pdf->_setNewPositionForNewLine(NULL) #2 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(1415): Spipu\Html2Pdf\Html2Pdf->_setNewPage() #3 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(1401): Spipu\Html2Pdf\Html2Pdf->_executeAction(Object(Spipu\Html2Pdf\Parsing\Node)) #4 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(595): Spipu\Html2Pdf\Html2Pdf->_makeHTMLcode() #5 /var/www/html/htmlpdf/test.php(138): Spipu\Html2Pdf\Html2Pdf->writeHTML('

Can someone guide me how can I generate my script here and put only my image into PDF.


person Mittul At TechnoBrave    schedule 05.10.2018    source источник
comment
Это не будет работать с какой-либо библиотекой диаграмм javascript, поскольку HTML2PDF не будет выполнять скрипт для создания диаграммы. Самый простой подход - создать диаграмму с помощью библиотеки диаграмм PHP. В противном случае вы можете использовать node.js для запуска на стороне сервера javascript.   -  person timclutton    schedule 08.10.2018


Ответы (2)


как намекает сообщение об ошибке: вам нужно перейти на Html2Pdf на Github и создать новый вопрос там; для добавления тега canvas в следующий выпуск библиотеки - или попробуйте использовать что-нибудь еще, кроме canvas, для визуализации диаграммы; другие графические библиотеки также будут работать с тегами div или svg.

хорошо, см. выпуск 372 ... автор не намеревается добавлять тег canvas.

поэтому вы могли только работать, например. с phantomJS, чтобы создать снимок экрана холста, а затем использовать его как ресурс статического изображения, чтобы отобразить его в PDF.

person Martin Zeitler    schedule 08.10.2018
comment
Спасибо за ответ. На данный момент я не могу изменить библиотеку, потому что я сделал много вещей в этой библиотеке, поэтому было бы идеально, если бы я мог найти обходной путь, используя саму эту библиотеку. - person Mittul At TechnoBrave; 08.10.2018
comment
@MittulAtTechnoBrave, если только автор не добавит тег canvas, в случае, если это даже технически возможно, не может быть способа добавить canvas в сгенерированный PDF. этот мой репозиторий будет содержать phantomJS (это браузер WebKit без заголовка, установка занимает около 2 ГБ): github.com/ syslogic / php-phantomjs - это был бы единственный способ, которым я мог бы получить изображение диаграммы - чтобы предоставить html2pdf содержимое, которое он ожидает в качестве входных данных. По сути, это веб-сервис, с помощью которого можно создавать скриншоты. используйте GD, чтобы обрезать его по размеру. - person Martin Zeitler; 08.10.2018
comment
Мне просто интересно, не можем ли мы использовать тег SVG в моей текущей библиотеке HTML2PDF? Я имею в виду, что должен быть какой-то способ добиться этого. - person Mittul At TechnoBrave; 08.10.2018

Я думаю, ваша проблема не в HTML2PDF, а в последовательности событий для создания HTML2PDF. Что я понимаю под мероприятиями:

1.  Loading PHP Code
2.  Loading according to PHP and creating Charts/Canvas through JS
3.  Pringing HTML2PDF Output through PHP Code

Настоящая проблема в том, что Шаг №3 не ожидает завершения Шага №2. Таким образом, вы должны создать триггер / событие для запуска шага №3 по завершении шага №2. Обычно HTML2PDF создается с помощью JS, как показано ниже:

person Vineet1982    schedule 14.10.2018
comment
Спасибо за ваш ответ. Я согласен с вашими пунктами и предложениями. Но я пробовал разные вещи для этого (вызов cURL и т. Д.), Но я все еще не могу решить эту проблему. Не могли бы вы помочь мне добиться этого, если возможно. - person Mittul At TechnoBrave; 15.10.2018
comment
Curl не будет вам полезен, поскольку curl - это код на стороне сервера, поэтому вам нужно запустить событие, как на стороне клиента, поэтому используйте код JavaScript для запуска события после загрузки диаграммы. Выполните поиск в Google с помощью диаграммы и html2pdf, вы найдете множество примеров, но их необходимо реализовать в соответствии с вашими потребностями. - person Vineet1982; 16.10.2018