Блог

Я пытаюсь создать PDF-файл на основе данных, и я получаю эти пробелы в документе. Я часами пытаюсь выяснить, в чем проблема, но, к сожалению, безуспешно… Может быть, кто-нибудь из вас тоже сталкивался с такой же проблемой или, по крайней мере, знает, как ее решить?

Любая помощь будет оценена по достоинству!

Я использую цикл «для» для отображения данных. Для некоторых блоков это нормально, но для некоторых возникает пробел, подобный этому: изображение файла pdf с дополнительным пробелом

Но в Интернете это выглядит так (правильный рендеринг):

отображаемые данные в Интернете

Я использую 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>