Wkhtmltopdf不呈现Chart.JS 2.5.0图
使用的
WKpdftohml版本0.12.3.2
PHPwkhtmltopdf版本2.2.0
Chart.JS版本2.5.0
我试着用上面的库打印一张线图。我可以使用shell命令：wkhtmltopdf --javascript-delay 5000 " http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html" test2.pdf复制一个pdf
因此，WKhtmltopdf没有问题。
问题是当我在我的应用程序中使用PHPwkhtmltopdf库时。我得到了一页空白。
从我的研究来看，这些都是我尝试过的：
- 将
'javascript-delay' => 500添加到Chart.JS选项； - 将
animation:{onComplete: function () {window.JSREPORT_READY_TO_START =true}添加到Chart.JS选项； - 将
<div style="width:800px;height:200;font-size:10px;">添加到画布html标记的父div中。 - 将
ctx.canvas.width = 800;ctx.canvas.height = 200;添加到图表的javascript初始化中。
但什么都没起作用。我喜欢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，而不是我自己的？！
回答 8
Stack Overflow用户
发布于 2019-08-11 23:42:32
下面是使用wkhtmltopdf版本0.12.5的代码
chart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<style>
.reportGraph {width:900px}
</style>
</head>
<body>
<div class="reportGraph"><canvas id="canvas"></canvas></div>
<script type="text/javascript">
// wkhtmltopdf 0.12.5 crash fix.
// https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3242#issuecomment-518099192
'use strict';
(function(setLineDash) {
CanvasRenderingContext2D.prototype.setLineDash = function() {
if(!arguments[0].length){
arguments[0] = [1,0];
}
// Now, call the original method
return setLineDash.apply(this, arguments);
};
})(CanvasRenderingContext2D.prototype.setLineDash);
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
function drawGraphs() {
new Chart(
document.getElementById("canvas"), {
"responsive": false,
"type":"line",
"data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"borderColor":"rgb(75, 192, 192)","lineTension":0.1}]},
"options":{}
}
);
}
window.onload = function() {
drawGraphs();
};
</script>
</body>
</html>运行：
$ wkhtmltopdf chart.html chart.pdf
Loading pages (1/6)
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
DoneStack Overflow用户
发布于 2017-03-03 09:14:55
找到答案了。在框架之外创建了一个单独的文件之后，我又做了一些测试。它在浏览器中呈现了图形，所以我尝试使用命令工具WKhtmltopdf，但当它与其他示例一起使用时，它没有工作(请参见更新#1)。所以我的php页面有问题。
运行与我在框架中所做的相同的测试，并得到了我的问题的答案。通过在画布标记中引入父div标记宽度维度，它使图形在页面中呈现。
<div style="width:800px;height:200;">
<canvas id="myChart" style="width:800px;height:200;"></canvas>
</div>这个命题是在这个网站上找到的：Github，所以谢谢laguiz。
Stack Overflow用户
发布于 2018-11-01 12:42:50
试着加上这个，
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>对我起作用了。
https://stackoverflow.com/questions/42561036
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号