我正在尝试从数据中生成 PDF，并且在文档中得到了这些空格。我尝试了几个小时来找出问题所在，但不幸的是，没有成功……也许你们中的任何人也遇到过同样的问题，或者至少知道如何解决它？
任何帮助，将不胜感激！
我正在使用“for”循环来显示数据。对于某些块是可以的，但对于一些像这样的空白会出现： pdf file image with extra white space
但在网络上它看起来像这样（正确的渲染）：
我正在使用 php5.6、symfony 3 和 knp_snappy 1.5。
我的树枝：
<script>
var arrOfCharts1_{{ random_id_all }} = [];
var blueColor = '#137dc5';
var orangeColor = '#f5793b';
var greenColor = "#3cb44b";
</script>
<h2 style="text-align:center; margin-bottom: 35px; margin-top: 65px;">
{{ 'report.all_statements'| trans({}, 'messages', locale) }} (N={{ totals.totalParticipants.completed }})
</h2>
<div id="{{ random_id_all }}" style="margin: 0">
<table class="report-table" style="margin-top: 40px">
{% for dimension in topNHighestAndLowestStatements.allByDimensionSubDimension %}
{% set index = loop.index0 %}
{% set noSub = false %}
{% set dataGraph = "graph-blue-dim-all" %}
{% for subDimension in dimension.subDimensions %}
{% set canvasId_all = 'allStatement' ~ index ~ loop.index0 ~ '_' ~ random_id_all %}
{# Setting dimensions/subDimensions #}
{% if dimension.subDimensions|length is same as(1) and subDimension.name is same as(dimension.name) %}
{% set dataGraph = "graph-orange-dim-all" %}
{% set noSub = true %}
{% endif %}
<tr>
<td class="td-main" colspan="2" style="page-break-before: avoid;padding-top: 0">
<div class="row">
<div style="width:350px; display: inline-block; vertical-align: top; margin-top:15px">
{% if noSub is same as(true) %}
<div>{{ subDimension.name }}</div>
<br>
{% else %}
<div style="margin-left: 15px; font-size: 14px; color: black">
{{ subDimension.name }}
</div>
<br>
{% endif %}
</div>
<div style="width:300px; display: inline-block;">
<canvas data-handler="{{ dataGraph }}" data-value="{{ subDimension.average }}" width="300"
height="70"></canvas>
</div>
</div>
</td>
</tr>
<tr style="page-break-inside: avoid;">
{% set height = 30 + 50 * subDimension.statements|length %}
<td class="td-sub" colspan="2" style="padding-top: 0">
<div class="row">
<div style="width:350px; height: {{ height }}px; padding-top: 5px; display: inline-block; vertical-align: top; margin-top: 20px">
<div style="height: {{ height - 30 }}px;">
{% for statement in subDimension.statements %}
<div style="font-size: 11px; color: black; margin-left: 30px; height: 50px ">{{ statement.title }}</div>
{% endfor %}
</div>
</div>
<div style="width:300px; border-top: 1px solid #999; padding-top: 5px; display: inline-block;">
<canvas id="{{ canvasId_all }}" width="300px" height="{{ height }}"></canvas>
</div>
</div>
</td>
</tr>
<script>
var labels1 = [];
var data1 = [];
{% for statement in subDimension.statements %}
var labelNumber1 = '{{ (statement.answerAverage)|number_format(2) }}';
labels1.push(labelNumber1);
data1.push({{ statement.answerAverage }});
{% endfor %}
arrOfCharts1_{{ random_id_all }}.push(new Chart(
document.getElementById("{{ canvasId_all }}").getContext('2d'),
{
type: 'horizontalBar',
data: {
labels: labels1,
datasets: [{
data: data1,
backgroundColor: greenColor,
borderColor: greenColor,
borderWidth: 1,
barThickness: 20,
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
layout: {
padding: {
left: 30
},
},
legend: {
display: false
},
bezierCurve: false,
scales: {
yAxes: [{
ticks: {
mirror: true,
padding: 35,
fontSize: 12
},
}],
xAxes: [{
display: true,
ticks: {
beginAtZero: true,
min: 0,
max: 5.0,
stepSize: 1,
callback: function (value) {
return value.toString();
},
},
}]
},
},
}
));
</script>
{# {% endif %}#}
{% endfor %}
{% endfor %}
</table>
<p style="font-size: 10px;">
{{ 'statements_marked_with_star_means_that_results_are_inverted'|trans({}, 'messages', locale) }}
</p>
</div>
<script>
var chartOptions2 = {
maintainAspectRatio: false,
responsive: false,
tooltips: {
enabled: false,
},
legend: {
display: false,
},
bezierCurve: false,
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 5,
// callback: (value, index, values) => (index === (values.length-1)) ? undefined : value
},
}],
},
};
function getChartSettings(canvas, color) {
return {
type: 'horizontalBar',
data: {
labels: [canvas.data('value')],
datasets: [{
data: [canvas.data('value')],
backgroundColor: [
color,
],
size: 20,
barThickness: 20,
}]
},
options: chartOptions2
};
}
$('[data-handler="graph-orange-dim-all"]').each(function () {
new Chart($(this), getChartSettings($(this), orangeColor));
});
$('[data-handler="graph-blue-dim-all"]').each(function () {
new Chart($(this), getChartSettings($(this), blueColor));
});
</script>