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

Question

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

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

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

问题出在哪里？我什至尝试使用"页面大小"=>"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"'
)
);
}

啧.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