修复 snappy 生成的 pdf 报告的页数

Question

我正在使用 snappy 生成 pdf 报告，

PDF 包含文本和图表，应为 4 页，每页包含与特定主题相关的数据。

所以我所做的是创建 4 个宽度：100% 和高度：100% 的 div，但我有 9 个页面而不是 4 个页面

问题出在哪里？我什至尝试使用 'page-size' =>'A4' 但生成了相同的 9 页

public function pdfAction(Survey $survey)
{
    $chart=new ChartController();
    $event = $survey->getEvent();


    $year = $survey->getYear();
    $qb = $this->getDoctrine()->getManager()->createQueryBuilder();
    $qb->select('e')
        ->from('AppBundle:Survey', 'e')
        ->where('e.year <= :year')
        ->andWhere('e.event = :event')
        ->setParameter('year', $year)
        ->setParameter('event', $event->getId())
        ->orderBy('e.year', 'DESC')
        ->setMaxResults(4);
    $survey_year= =  $qb->getQuery()->getResult();
    $date = array();

    $data1  = array();
    $data2  = array();
    $data3  = array();
    $data4  = array();


    $survey_year= array_reverse($survey_year, true);
    foreach($survey_year as $ea){
        $date[] = $ea->getAnnee();
        $data1[] = $ea->getForm()->getBudget ();
        $data2[] = $ea->getForm()->getRessources();
        $data3[] = $ea->getForm()->getTauxGlobal();
        $data4[] = $ea->getForm()->getTauxConsumption();


    }


    $list1= array(
        'name' => 'Budget',
        'type'  => 'column',
        'color' => '#4572A7',
        'yAxis' => 1,
        'dataLabels' => array(
            'enabled' => true
        ),
        'data' => $data1
    );


    $list2 =  array(
        'name' => 'Ressource',
        'type'  => 'column',
        'color' => '#D49EDA',
        'yAxis' => 1,
        'dataLabels' => array(
            'enabled' => true
        ),
        'data' => $data2
    );


    $list3= array(
        'name' => 'Taux  global',
        'type'  => 'spline',
        'color' => '#0A0F19',
        'dataLabels' => array(
            'enabled' => true
        ),
        'data' => $data3
    );


    $list4 =  array(
        'name'=> 'Taux Consumption',
        'type'  => 'spline',
        'color' => '#225824',
        'dataLabels' => array(
            'enabled' => true
        ),
        'data' => $data4
    );

    $containerpie1 = $chart->pieChart1($survey);

    $containerpie2 = $chart->pieChart2($survey);
    $containerpie3=$chart->pieChart3($survey);
    $container4=$chart->multiAxeChart($date, $list1, $list2,$list3,$list4);



    $html =  $this->render('AppBundle:event:pdf.html.twig',array(
        'survey' =>$survey,
        'containerpie1'=>$containerpie1,
        'containerpie2'=>$containerpie2,
        'containerpie3'=>$containerpie3,
        'container4' => $container4,

    ));




    return new Response(
        $this->get('knp_snappy.pdf')->getOutputFromHtml($html,array(

            'default-header'=>false,
            'encoding' => 'utf-8',
            'images' => true,
            'enable-javascript' => true,
            'javascript-delay' => 5000
        )),
        200,
        array(
            'Content-Type'          => 'application/pdf',
            'Content-Disposition'   => 'attachment; filename="file1.pdf"'
        )
    );

}

Pdf.twig.html

<div style="width: 100%; height: 100% ">

    <header>

        <span>{{ survey.event.name </span>
    </header>
<h2 style="width:100% ;background-color:darkseagreen">Genaral</h2>

    <p>
        <span class="address" style="font-weight: bold">address:</span>
        <span >survey.event. address}}</span>
    </p>
    <p>
        <span class="email" style="font-weight: bold">email:</span>
        <span class=survey.event.email}}</span>
    </p>
</div>

<div style="width: 100%;height: 100% ">

        <h2 style="width:100%;background-color:darkseagreen"> Resources </h2>
        <p></p>
        <p>Budget p>



        <div style="display: inline;padding-top: 5em">
            <div id="containerpie1" style="display:inline-block; width: 350px; height: 300px; margin: 0 auto; padding-left: 18em">

            </div>
        </div>
        <div style="display: inline;padding-top: 5em">
            <div id="containerpie2" style="display:inline-block; width: 350px; height: 300px; margin: 0 auto; padding-left: 18em">

            </div>
        </div>
    </div>

<div style="width: 100%;height: 100% ">


        <h2 style="width:100%;background-color:darkseagreen">Activity</h2>
        <p></p>

    <div  >

        <div id="container3" style="display:inline-block;width: 350px;  height: 280px; margin: 0 auto"></div>


    </div>

</div>

<div style="width:100%;height:100% ">


        <h2 style="width:100%;background-color:darkseagreen">Team</h2>
        <p></p>
        <p>Performance</p>
    <div >
        <div id=" container4" style="display:inline-block; width: 800px;  height: 400px; margin: 0 auto">
        </div>
    </div>


</div>

更新

经过更多搜索，我发现我应该以毫米为单位固定高度

<div style="width: 100%; height: 340mm ">

这是唯一的解决方案吗？

Answer 1

尝试将onepage 类添加到您的 div 并添加以下 CSS：

.onepage {
    page-break-inside: avoid !important;
    page-break-after: always !important;
}
@media print{
    .onepage {
        page-break-inside: avoid !important; 
        page-break-after: always !important;
    }
}

它适用于 Snappy 和 wkhtmltopdf v0.12.2