Symfony打印标签采用a4格式

时间:2017-02-17 13:51:39

标签: html css symfony wkhtmltopdf

我使用wkhtmltopdf包将我的html页面转换为.pdf文件。我想使用这个,所以顾客可以在3 x 7的标签纸上打印内容。标签的确切尺寸是70 x 42,3mm。问题是,我似乎无法正确调整尺寸。

我使用右侧浮点数和33%宽度来获得3列,现在我试图获得7行。我认为将它除以14.2%(7行)就可以了。但是它只会打印1个标签。当我删除高度时,它将打印所有标签,但每页超过7。有人帮我弄清楚如何获得标签的3x7 a4格式吗?

{% 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 %}

编辑:添加了最新的代码,如果我达到21,则使用标签计算新页面

enter image description here

1 个答案:

答案 0 :(得分:1)

这里的快速解决方案: 要每21个标签创建一个新页面:

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

的CSS:

.newPage {
    page-break-before:always
}

我自己的实施: 控制器:

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;
}

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>