Wkhtmltopdf不會呈現chart.js之2.5.0圖

使用：
WKpdftohml版本0.12.3.2
PHPwkhtmltopdf版本2.2.0
chart.js之版本2.5.0Wkhtmltopdf不會呈現chart.js之2.5.0圖

我想使用上述庫打印線圖。我可以使用shell命令複製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選項;
向畫布的父div添加<div style="width:800px;height:200;font-size:10px;"> html標記
向圖表的JavaScript初始化添加了ctx.canvas.width = 800;ctx.canvas.height = 200;。

那麼毫無效果。我喜歡Chart.JS和WKhtmltopdf，但如果我不能打印，我將不得不放棄其中一個。有沒有解決方法？

這是PHPwkhtmltopdf我的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
製造與頁面輸出的PHP文件。在瀏覽器中運行它並呈現圖形。當我在控制檯中執行時，它會渲染除圖形以外的所有內容！
它怎麼可能wkhtmltopdf呈現本頁面中的圖形：http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html但不是我自己的？！

來源

2017-03-02 Luís Alves

你試過只是關閉動畫？ – Quince

我該怎麼做？我試過：''pdf - > setOptions（['orientation'=>'Landscape'， 'javascript-delay'=> 500, //'window-status'=>'myrandomstring'， 'animation'=> false， 'debug-javascript'， 'no-stop-slow-scripts'， ]）;'但是它失敗了。 –

找到了答案。在框架外部創建單獨的文件後，我再次進行了一些測試。它在瀏覽器中顯示了圖形，所以我試圖使用命令工具WKhtmltopdf，而當它與其他示例（請參閱Update＃1）配合使用時，它無法正常工作。所以我的php頁面有問題。
進行相同的測試，我在框架中做了，並得到了我的問題的答案。通過在畫布標籤中引入父div標籤寬度尺寸，它使圖形在頁面中呈現。

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

的命題在這個網站中發現：Github，這樣的感謝laguiz。

來源

2017-03-03 09:14:55

我也在爲此苦苦掙扎，你的自我回答並沒有幫助我的案子。我使用的是symfony 3.3和Chart.js 2，無論我做什麼，都無法正常工作。所以我以不同的方式解決了這個問題（也許不是一個乾淨的問題），我想在這裏發佈它以獲得其他人的啓發。

我需要導出一個頁面，這是我在瀏覽器中向用戶展示的頁面。在瀏覽器中，我使用Javascript功能來獲取圖像走出渲染圖形與

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中的圖像，即轉換爲PDF。

希望有所幫助。

來源

2017-12-14 21:45:35

是啊我已經解決了這個問題嘗試使用Chartjs 1沒有新的圖表JS 因爲laravel活潑的使用wkhtmltopdf不支持CSS動畫和新chartjs使用CSS動畫 https://github.com/chartjs/Chart.js/issues/4767表明和解決方案我發現是使用谷歌圖表，它使用svg，所以你可以得到高分辨率圖表

來源

2018-01-03 15:28:55 admica

Wkhtmltopdf不會呈現chart.js之2.5.0圖

回答

相關問題