Search code examples
htmlcsssymfonywkhtmltopdf

Symfony printing label on a4 format

I am using the wkhtmltopdf bundle to convert my html page to a .pdf file. I want to use this so customers can print the content on a label paper seized 3 x 7. The exact size of a label is 70 x 42,3mm. The problem is, i cant seem to get the sizing right.

I used the css of float right and 33% width to get 3 columns, and now im trying to get 7 rows. I thought dividing it by 14.2% (7 rows) would do the trick. However it will then only print 1 label. When i remove the height it will print all the labels, but more then 7 per page. Anyone help me figure out how to get a 3x7 a4 format for labels?

{% set labels = 1 %}

{% block body %}
    {% for sale in webstore.getSales %}
        {% for orderItem in sale.getOrderItems %}
            {% if labels == 21 %}

        <div style="page-break-after: before;" class="newPage"></div>
            {% set labels = 1 %}
            <br>
        </div>
        {%endif%}
        <div class="stickerWidth" id="stickerWidth"  >  
            <div class="text">
                <div >{{sale.getWebstoreOrderId}}   : <span style="float:right; margin-right:5px; font-size:20px" > {{sale.getDate.date | date("d/m/Y")}}</span>  </div> <br><br>
                <div style=" text-align:center;font-size: 24px;">{{orderItem.getAmount}} x {{orderItem.getItemName}}</div> <br>
                  <div>
                    {% if webstore.name %}
                        <span style="font-size:20px">
                        {{webstore.id}}<br>
                        {{webstore.name}}</span>
                     {% endif %}

                </div>
            </div>

        </div>
    {% set labels = labels + 1 %}
    {% endfor %}
{% endfor %}

{% endblock %}

{% block styleSheets%}
    <link rel="stylesheet" href="{{ base_dir ~ asset('css/main.css') }}">
    <style>
        .newPage {
             page-break-after: always;
             page-break-inside: avoid;
        }
        .stickerWidth{
            height: 180px;
            width: 33%;
            float: left;
            background-color: green;            
        }

        .text{
            background-color: red;
            margin-right: 5px; 
            margin-top: 5px;
            margin-top: 5px;
        }
    </style>
{% endblock %}

EDIT: added the latest code, used labels to count if i reach 21 then new page

enter image description here

Solution

  • The quick solution here: To create a new page every 21 labels:

    {% for orderItem in sale.getOrderItems %}
    {% if (loop.index % (7*3) == 0) %}
       <div class="newPage"></div>
    {% endif %}
    {# ... #}

    css:

    .newPage {
    page-break-before:always
}

    My own implementation: Controller:

    public function export() {
    $html = $this->get('yourPDFservice')->getHtml($someParams);

    //echo $html;exit; // use that to debug your html

    $snappyPdf = $this->getLibExportPDF();

    return new Response(
        $snappyPdf->getOutputFromHtml($html),
        200,
        array(
            'Content-Type'          => 'application/pdf',
            'Content-Disposition'   => 'attachment; filename="filename.pdf"'
        )
    );

private function getLibExportPDF() {
    $snappyPdf = $this->get('knp_snappy.pdf');

    $snappyPdf->setOption('page-size', 'A4');// 21x29.7 cm
    $snappyPdf->setOption('zoom', 1 );
    $snappyPdf->setOption('dpi', 300 );// 21x29.7 (300dpi)

    return $snappyPdf;
}

    The html:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.nobreak {
  page-break-inside:avoid;
}
.newPage {
  page-break-before:always;
}
</style>

</head>
<body>
    {# Your html code here #}
</body>
</html>