如何在 Html2PDF 中添加 ChartJS 代码以查看图像

Question

我正在使用图表.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 SpipuHtml2PdfHtml2Pdf;
use SpipuHtml2PdfExceptionHtml2PdfException;
use SpipuHtml2PdfExceptionExceptionFormatter;

$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：Html2PDF 不知道 html 标记 [canvas]。您可以创建它并将其推送到 Html2Pdf GitHub 项目上。in/var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php：1435 堆栈跟踪： #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('有人可以指导我如何在这里生成脚本并将我的图像放入PDF中。

Answer 1

正如错误消息所暗示的那样：您必须转到Github上的Html2Pdf并在那里创建一个新问题;为了将标签canvas添加到库的下一个版本中 - 或者尝试使用canvas以外的其他东西来呈现图表; 其他图表库也可以使用标签div或svg。

好吧，请参阅问题 372 ...作者无意添加标签canvas。

因此，您只能变通方法，例如，使用phantomJS来创建画布的屏幕截图，然后将其用作静态图像资源，以便将其呈现为 PDF。

Answer 2

我认为您的问题不在于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的完成。因此，您必须创建一个触发器/事件，以便在完成步骤 No.2 时启动步骤 No.3。通常，HTML2PDF是通过JS创建的，如下所示：