我使用的是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文件时,我收到一个错误消息,
致命错误:未捕获的Spipu\Html2Pdf\Exception\HtmlParsingException(错误代码:Html 2 Pdf无法识别html标记[canvas]。您可以创建它并将其推送到Html 2 Pdf GitHub项目中。在/var/www/html/htmlpdf/vendor/spipu/html 2 pdf/src/Html2Pdf.php中:1435堆栈跟踪:http://www.com/zh_cn.cn您好,欢迎访问本网站!您的位置:首页〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉html2Pdf.php(1415)您可以在这里找到您想要的页面。http://www.com/zh_cn.cn您的位置:首页〉〉下载中心〉您的位置:首页〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉您的位置:首页〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉编写HTML('
有人能指导我如何在这里生成我的脚本,并只把我的图像到PDF。
2条答案
按热度按时间7rtdyuoh1#
作为错误消息提示:您必须转到Github上的Html2Pdf并在那里创建一个新问题;以便将标签
canvas
添加到库的下一个版本中-或者尝试使用canvas
以外的其他内容来呈现图表;其他图表库也可以与标签div
或svg
一起工作。好吧,请参见issue 372...作者并不打算添加标签
canvas
。因此,您只能使用
phantomJS
创建画布的屏幕截图,然后将其用作静态图像资源,以便将其呈现为PDF。ykejflvf2#
我认为你的问题不在于HTML 2 PDF,而在于创建HTML 2 PDF的事件序列。我对事件的理解是:
真实的的问题是第3步没有等待第2步的完成。因此,您必须创建一个触发器/事件,以便在第2步完成后启动第3步。通常,HTML 2 PDF通过JS创建,如下所示: