Skip to content

Instantly share code, notes, and snippets.

@kaajavi

kaajavi/example_html2pdf_4django.html

Created April 28, 2016 11:58
Show Gist options
  • Save kaajavi/1490ef2831a3cd225d961f85207717c6 to your computer and use it in GitHub Desktop.
Save kaajavi/1490ef2831a3cd225d961f85207717c6 to your computer and use it in GitHub Desktop.
Download ZIP
Example: Template HTML for html2pdf library
Raw
example_html2pdf_4django.html
<html>
<header>
<meta charset="utf-8">
<!-- Custom CSS -->
<style>
@page {
size: a4 portrait;
@frame image_frame { /* Static Frame - Donde se pone la imagen */
-pdf-frame-content: image_content;
left: 50pt; width: 50pt; top: 10pt; height: 50pt;
text-align: center;
border: 0pt solid white;
}
@frame header_frame { /* Static Frame - Para el encabezado*/
-pdf-frame-content: header_content;
left: 250pt; width: 312pt; top: 20pt; height: 20pt;
text-align: center;
border: 0pt solid white;
}
@frame header_frame { /* Static Frame <!-- Título del informe -->*/
-pdf-frame-content: header_title;
left: 150pt; width: 412pt; top: 40pt; height: 20pt;
text-align: center;
border: 0pt solid white;
}
@frame header_frame { /* Static Frame: Header fijo de la tabla */
-pdf-frame-content: header_div;
left: 50pt; width: 512pt; top: 60pt; height: 5pt;
text-align: center;
border: 0pt solid white;
}
@frame header_table { /* Static Frame: lugar donde ponemos la tabla */
-pdf-frame-content: header_table;
left: 50pt; width: 512pt; top: 65pt; height: 15pt;
text-align: center;
border: 0pt solid white;
}
@frame footer_frame { /* Static Frame: lugar donde ponemos el footer (en mi caso paginador) */
-pdf-frame-content: footer_content;
left: 50pt; width: 512pt; top: 800pt; height: 40pt;
border: 0pt solid white;
}
/* ESTE FRAME NO SE REPITE EN CADA PAGINA, EL RESTO SI */
@frame content_frame { /* Content Frame: Todo lo que no esté en un div de los otros frames. */
left: 50pt; width: 512pt; top: 80pt; height: 720pt;
border: 0pt solid white;
}
}
.table th {
vertical-align:middle;
text-align:center;
border: 1pt solid black;
height: 60pt;
padding-top: 2px;
}
.table td {
vertical-align:middle;
text-align:left;
border: 1pt solid #CCCCCC;
padding-top: 2px;
padding-left: 3px;
}
.td_left {
text-align:left;
}
.td_center {
text-align:center;
}
.bg-grey{
background:#EEEFFF;
}
.td_10 {
width:10%;
vertical-align:middle;
/* **overflow:hidden;** (Optional)This might be useful for some overflow contents*/
}
.td_20 {
width:20%;
vertical-align:middle;
/* **overflow:hidden;** (Optional)This might be useful for some overflow contents*/
}
.td_30 {
width:30%;
vertical-align:middle;
/* **overflow:hidden;** (Optional)This might be useful for some overflow contents*/
}
.td_40 {
width:40%;
vertical-align:middle;
/* **overflow:hidden;** (Optional)This might be useful for some overflow contents*/
}
.td_50 {
width:50%;
vertical-align:middle;
/* **overflow:hidden;** (Optional)This might be useful for some overflow contents*/
}
</style>
</header>
<body>
<!-- Content for Static Frame 'header_frame' -->
<div id="image_content">
<!-- Content con la imagen -->
</div>
<div id="header_content">
<!-- Título del informe -->
<h1>Titulo del informe</h1>
</div>
<div id="header_title">
<h2>Lista de alumnos</h2>
</div>
<div id="header_div"><hr></div>
<div id= "header_table">
<table class="table">
<thead>
<tr>
<th class ="td_10 td_center" >Orden</th>
<th class ="td_40">Apellido</th>
<th class ="td_40">Nombre</th>
<th class ="">Dni</th>
<th class ="">Telefono</th>
</tr>
</thead>
</table>
<hr>
</div>
<!-- Content for Static Frame 'footer_frame' -->
<div id="footer_content">
<hr/>
<!-- PAGINADOR EN EL FOOTER -->
Página <pdf:pagenumber> de <pdf:pagecount>
</div>
<!-- HTML Content - Aca va lo que se repite sin identificación-->
<table class="table">
<tbody>
{% for alumno in alumnos %}
<tr>
<td class ="td_10 td_center">{{forloop.counter}}</td>
<td class ="td_40">{{alumno.apellidos}}</td>
<td class ="td_40">{{alumno.nombres}}</td>
<td class ="">{{alumno.dni}}</td>
<td class ="">{{alumno.telefonoHogar}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment