You need to sign in to do that
Don't have an account?
Camila Heitz
Splitting datatable in pdf onto separate pages
Hello,
I have my header and my footer showing on every page, but the pagination isn't right since my footer covers my content.
Any idea on what I can do?
Thank you!
Here's my code:
<apex:page controller="cnReportHoras" showHeader="false" standardStylesheets="false" renderAs="pdf">
<apex:stylesheet value="{!URLFOR($Resource.Estatico, 'css/Style.css')}"/>
<head>
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,300" rel="stylesheet" type="text/css" />
<style>
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: local('Comfortaa Light'), local('Comfortaa-Light'), url(https://themes.googleusercontent.com/static/fonts/comfortaa/v5/r_tUZNl0G8xCoOmp_JkSCnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
table {
-fs-table-paginate: paginate;
}
table tr{
page-break-inside:avoid;
}
#footer_container {
bottom:0;
left:0;
position:fixed;
width:100%;
}
#footer {
margin:0 auto;
}
#header-cont {
width:100%;
position:fixed;
top:0px;
}
#header {
margin:0px auto;
}
@page{
@bottom-left {
content: element(footer);
}
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
@top-left-corner {
content: element(header);
}
margin-top:2cm;
margin-left:1.54cm;
margin-right:1.54cm;
margin-bottom:2cm;
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div id="header-cont">
<div id="header">
<img src="{!URLFOR($Resource.Estatico, 'img/s4gheader.png')}" width="100%"/>
</div>
</div>
<div class="clear" style="height:30px;" />
<body style="margin-top:200px; margin-bottom:60px; font-family: 'Comfortaa'">
<table width="100%" class="tablaGral" >
<tr>
<td width="70%">
<img src="{!URLFOR($Resource.Estatico, 'img/s4g-status.png')}" width="100%" />
</td>
<td width="30%">
<table class="tableC">
<tr>
<td>HORAS CONTRATADAS: </td>
<td>{!proyectos[0].horasEstimadas} hrs.</td>
</tr>
<tr>
<td style="vertical-align:middle;">CONSUMO: </td>
<td>
<apex:image id="activo" value="{!URLFOR($Resource.Estatico, 'img/render1.png')}" width="60" rendered="{!if(proyectos[0].percConsumido<100,true,false)}" />
<apex:image id="agotado" value="{!URLFOR($Resource.Estatico, 'img/render2.png')}" width="60" rendered="{!if(proyectos[0].percConsumido>=100,true,false)}" />
</td>
</tr>
<tr>
<td>TODAVIA QUEDAN: </td>
<td>{!proyectos[0].horasRestantes} hrs.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="20%">
<table width="85%">
<tr>
<th>Cliente </th>
<th>Fecha inicio</th>
<th>Fecha cierre</th>
</tr>
<tr>
<td>{!proyectos[0].cliente}</td>
<td style="color:red;">
<apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
<apex:param value="{!proyectos[0].comienzoPlanificado}" />
</apex:outputText>
</td>
<td style="color:red;">
<apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
<apex:param value="{!proyectos[0].finPlanificado}" />
</apex:outputText>
</td>
</tr>
</table>
</td>
<td width="80%">
</td>
</tr>
</table>
<div class="clear" style="height:50px;"/>
<div class="panel panel-vercasos" style="border: 1px solid; ">
<apex:pageBlock title="Peticiones">
<apex:pageBlockTable value="{!peticiones}" var="peticion" id="tablaPeticiones" styleClass="table" cellspacing="10" rowClasses="odd,even">
<apex:column >
<apex:facet name="header">Petición</apex:facet>
<apex:outputField value="{!peticion.Id_Peticion__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">Asunto</apex:facet>
<apex:outputField value="{!peticion.subject}"/>
</apex:column>
<apex:column >
<apex:facet name="header">Horas</apex:facet>
<center><apex:outputField value="{!peticion.Horas_estimadas_peticion__c}" /></center>
</apex:column>
<apex:column >
<apex:facet name="header"><center>Estado</center></apex:facet>
<apex:outputField value="{!peticion.Estado_Peticion__c}" />
</apex:column>
<apex:column >
<apex:facet name="header">Fecha Petición</apex:facet>
<center><apex:outputField value="{!peticion.Fecha_Estimada_Peticion__c}" /></center>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
<div class="clear" style="height:20px;" />
</div>
</body>
<div id="footer_container">
<div id="footer">
<img src="{!URLFOR($Resource.Estatico, 'img/s4gfooter.png')}" width="100%" height="100%" />
</div>
</div>
</apex:page>
I have my header and my footer showing on every page, but the pagination isn't right since my footer covers my content.
Any idea on what I can do?
Thank you!
Here's my code:
<apex:page controller="cnReportHoras" showHeader="false" standardStylesheets="false" renderAs="pdf">
<apex:stylesheet value="{!URLFOR($Resource.Estatico, 'css/Style.css')}"/>
<head>
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,300" rel="stylesheet" type="text/css" />
<style>
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: local('Comfortaa Light'), local('Comfortaa-Light'), url(https://themes.googleusercontent.com/static/fonts/comfortaa/v5/r_tUZNl0G8xCoOmp_JkSCnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
table {
-fs-table-paginate: paginate;
}
table tr{
page-break-inside:avoid;
}
#footer_container {
bottom:0;
left:0;
position:fixed;
width:100%;
}
#footer {
margin:0 auto;
}
#header-cont {
width:100%;
position:fixed;
top:0px;
}
#header {
margin:0px auto;
}
@page{
@bottom-left {
content: element(footer);
}
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
@top-left-corner {
content: element(header);
}
margin-top:2cm;
margin-left:1.54cm;
margin-right:1.54cm;
margin-bottom:2cm;
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div id="header-cont">
<div id="header">
<img src="{!URLFOR($Resource.Estatico, 'img/s4gheader.png')}" width="100%"/>
</div>
</div>
<div class="clear" style="height:30px;" />
<body style="margin-top:200px; margin-bottom:60px; font-family: 'Comfortaa'">
<table width="100%" class="tablaGral" >
<tr>
<td width="70%">
<img src="{!URLFOR($Resource.Estatico, 'img/s4g-status.png')}" width="100%" />
</td>
<td width="30%">
<table class="tableC">
<tr>
<td>HORAS CONTRATADAS: </td>
<td>{!proyectos[0].horasEstimadas} hrs.</td>
</tr>
<tr>
<td style="vertical-align:middle;">CONSUMO: </td>
<td>
<apex:image id="activo" value="{!URLFOR($Resource.Estatico, 'img/render1.png')}" width="60" rendered="{!if(proyectos[0].percConsumido<100,true,false)}" />
<apex:image id="agotado" value="{!URLFOR($Resource.Estatico, 'img/render2.png')}" width="60" rendered="{!if(proyectos[0].percConsumido>=100,true,false)}" />
</td>
</tr>
<tr>
<td>TODAVIA QUEDAN: </td>
<td>{!proyectos[0].horasRestantes} hrs.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="20%">
<table width="85%">
<tr>
<th>Cliente </th>
<th>Fecha inicio</th>
<th>Fecha cierre</th>
</tr>
<tr>
<td>{!proyectos[0].cliente}</td>
<td style="color:red;">
<apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
<apex:param value="{!proyectos[0].comienzoPlanificado}" />
</apex:outputText>
</td>
<td style="color:red;">
<apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
<apex:param value="{!proyectos[0].finPlanificado}" />
</apex:outputText>
</td>
</tr>
</table>
</td>
<td width="80%">
</td>
</tr>
</table>
<div class="clear" style="height:50px;"/>
<div class="panel panel-vercasos" style="border: 1px solid; ">
<apex:pageBlock title="Peticiones">
<apex:pageBlockTable value="{!peticiones}" var="peticion" id="tablaPeticiones" styleClass="table" cellspacing="10" rowClasses="odd,even">
<apex:column >
<apex:facet name="header">Petición</apex:facet>
<apex:outputField value="{!peticion.Id_Peticion__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">Asunto</apex:facet>
<apex:outputField value="{!peticion.subject}"/>
</apex:column>
<apex:column >
<apex:facet name="header">Horas</apex:facet>
<center><apex:outputField value="{!peticion.Horas_estimadas_peticion__c}" /></center>
</apex:column>
<apex:column >
<apex:facet name="header"><center>Estado</center></apex:facet>
<apex:outputField value="{!peticion.Estado_Peticion__c}" />
</apex:column>
<apex:column >
<apex:facet name="header">Fecha Petición</apex:facet>
<center><apex:outputField value="{!peticion.Fecha_Estimada_Peticion__c}" /></center>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
<div class="clear" style="height:20px;" />
</div>
</body>
<div id="footer_container">
<div id="footer">
<img src="{!URLFOR($Resource.Estatico, 'img/s4gfooter.png')}" width="100%" height="100%" />
</div>
</div>
</apex:page>
PLs check the following thread - this has a sample solution code wich could help you update yours in case these is something missing:
https://developer.salesforce.com/forums?id=906F000000098sQIAQ