Wkhtmltopdf는 Chart.JS에게

Question

이를 사용하여 2.5.0 그래프 렌더링하지 않습니다
WKpdftohml 버전 0.12.3.2
PHPwkhtmltopdf 버전 2.2.0
Chart.JS 버전 2.5.0

내가하려고 해요 위의 라이브러리를 사용하여 선 그래프를 인쇄하십시오. 쉘 명령을 사용하여 pdf를 재현 할 수 있습니다. wkhtmltopdf --javascript-delay 5000 " http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html" test2.pdf
그래서 WKhtmltopdf에는 문제가 없습니다.

PHPwkhtmltopdf 라이브러리를 사용하여 내 앱에서 문제가 발생하는 경우가 있습니다. 나는 빈 페이지를 얻는다. 내 연구에서
이 내가 시도 것들 :

• 추가 'javascript-delay' => 500 Chart.JS 옵션으로는;
• animation:{onComplete: function() {window.JSREPORT_READY_TO_START =true}을 Chart.JS 옵션에 추가했습니다.
• 캔버스 html 태그의 부모 div에 <div style="width:800px;height:200;font-size:10px;">을 추가했습니다.
• 차트의 자바 스크립트 초기화에 ctx.canvas.width = 800;ctx.canvas.height = 200;이 추가되었습니다.

아무 것도 효과가 없습니다. 저는 Chart.JS와 WKhtmltopdf를 좋아하지만, 인쇄를 할 수 없다면 그 중 하나를 삭제해야합니다. 어떤 해결책이 있습니까?

이것은 PHPwkhtmltopdf 내 PHP 코드 : 페이지 출력 PHP 파일을 만들어

public function imprimir ($request, $response) 
{ 
    // include_once 'config/constants.php'; 
    // include_once 'resources/auxiliar/helpers.php'; 

    $folha = $_POST['printit']; 
    $variaveis = explode(',', $folha); 

    $nomeFicheiro = $variaveis[0]; 

    $printName = substr($nomeFicheiro, 5); 

    if (isset($variaveis[2])) { 

     $_SESSION['mesNumero'] = $variaveis[2]; 
     $_SESSION['mes'] = $variaveis[1]; 

    } else { 

     $mesNumero = 0; 
     $mes = ''; 

    } 

    ob_start(); 
    if ($nomeFicheiro == 'printPpiam') { 
     require ('C:/xampp/htdocs/.../'.$nomeFicheiro.'.php'); 
    } else { 
     require ('C:/xampp/htdocs/.../'.$nomeFicheiro.'.php'); 
    } 
    $content = ob_get_clean(); 

    // You can pass a filename, a HTML string, an URL or an options array to the constructor 
    $pdf = new Pdf($content); 

    // On some systems you may have to set the path to the wkhtmltopdf executable 
    $pdf->binary = 'C:/Program Files/wkhtmltopdf/bin/wkhtmltopdf'; 

    $pdf -> setOptions(['orientation' => 'Landscape', 
         'javascript-delay' => 500, 
         // 'enable-javascript' => true, 
         // 'no-stop-slow-scripts' => true] 
        ]); 

    if (!$pdf->send($printName.'.pdf')) { 
     throw new Exception('Could not create PDF: '.$pdf->getError()); 
    } 

    $pdf->send($printName.'.pdf'); 

} 

# 업데이트 1
. 브라우저에서 실행하고 그래프를 렌더링합니다. 콘솔에서 할 때 그래프를 제외한 모든 것을 렌더링합니다!
어떻게 wkhtmltopdf가이 페이지의 그래픽을 렌더링 할 수 있습니까? http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html하지만 내 자신이 아니십니까?!

Answer 1

답을 찾았습니다. 프레임 워크 외부에서 별도의 파일을 만든 후에 다시 테스트를 수행했습니다. 브라우저에서 그래프를 렌더링하여 WKhtmltopdf 명령 도구를 사용하려고 시도했으며 다른 예제 (Update # 1 참조)와 함께 작동하지 않았습니다. 그래서 내 PHP 페이지에 문제가있다.
프레임 워크에서했던 것과 동일한 테스트를 수행하고 내 문제에 대한 해답을 얻었습니다. canvas 태그에 부모 div 태그 폭 치수를 도입하여 페이지에 그래프를 렌더링했습니다. 덕분에 laguiz 있도록 Github :

<div style="width:800px;height:200;"> 
    <canvas id="myChart" style="width:800px;height:200;"></canvas> 
</div> 

명제

이 사이트에서 발견되었다.

Answer 2

나는 그걸로 strugling하고 당신은 자기 대답은 내 경우에 도움이되지 않았다. 심포니 3.3과 Chart.js 2를 사용하고 있습니다. 제대로 작동하지 않았습니다. 그래서 나는 그것을 다른 방식으로 (아마도 깨끗한 것이 아닌) 풀어 냈고 다른 사람들에게 영감을주기 위해 여기에 게시하고 싶었습니다.

브라우저에서 사용자에게 표시하고있는 페이지를 내보내야했습니다.브라우저에서 내가 세션과 PDF 내보내기위한 제어기에 넣어

animation: { 
       onComplete: function(animation) { 
        console.log('done'); 
        var url=document.getElementById("barChartByCountryWeight{{ part }}{{ subsetKey }}").toDataURL(); 
        $.ajax({ 
         url: 'saveChartImages', 
         type: 'POST', 
         data: { 'barChartByCountryWeight{{ part }}{{ subsetKey }}': url }, 
         success: function(result) { 
          console.log(result); 
          console.log('the request was successfully sent to the server'); 
         }, 
         error: function (request, error) { 
          console.log(arguments[0]['responseText']); 
          console.log(" Can't do because: " + error); 
         } 
        }); 

       } 
      } 

와 서버 측에서 렌더링 된 그래프에서 사진을 얻기 위해 자바 스크립트를 사용하여, 나는 세션에서 이미지를 촬영하고 넣어 가지고 PDF로 변환 된 HTML 이미지.

희망이 있습니다. 나는이 문제 를 해결했다

Answer 3

그래는 Chartjs를 사용하려고 1없는 새 차트 JS laravel의 기운찬는 CSS 애니메이션 새로운 chartjs을 지원하지 않습니다 wkhtmltopdf를 사용 https://github.com/chartjs/Chart.js/issues/4767 보여 CSS 애니메이션을 사용하기 때문에 및 솔루션이 당신이 고해상도 차트를 얻을 수 있도록 svg를 사용하는 Google 차트를 사용하는 것입니다.