javascript - tiempo - ¿Cómo hacer la numeración de páginas en encabezado/pie de página htmls con wkhtmltopdf?
como poner pie de pagina en word diferente en cada hoja (6)
En la documentación de wkhtmltopdf ( madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html ) debajo del encabezado "Pies de página y encabezados" hay un fragmento de código para lograr la numeración de páginas:
<html><head><script>
function subst() {
var vars={};
var x=document.location.search.substring(1).split(''&'');
for(var i in x) {var z=x[i].split(''='',2);vars[z[0]] = unescape(z[1]);}
var x=[''frompage'',''topage'',''page'',''webpage'',''section'',''subsection'',''subsubsection''];
for(var i in x) {
var y = document.getElementsByClassName(x[i]);
for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script></head><body style="border:0; margin: 0;" onload="subst()">
<table style="border-bottom: 1px solid black; width: 100%">
<tr>
<td class="section"></td>
<td style="text-align:right">
Page <span class="page"></span> of <span class="topage"></span>
</td>
</tr>
</table>
</body></html>
También hay más variables disponibles que pueden ser sustituidas además de los números de página para su uso en encabezados / pies de página.
Estoy desarrollando un sistema de facturación electrónica, y una de nuestras características es generar archivos PDF de las facturas y enviarlas por correo. Tenemos varias plantillas para facturas y crearemos más después, por lo que decidimos usar plantillas HTML, generar documentos HTML y luego convertirlos a PDF. Pero nos enfrentamos a un problema con wkhtmltopdf, que hasta donde yo sé (he estado buscando durante días para encontrar la solución) no podemos simplemente usar HTML como encabezado / pie de página, y mostrar los números de página en ellos.
En un informe de error (o similar) ( http://code.google.com/p/wkhtmltopdf/issues/detail?id=140 ) leo que con JavaScript se puede obtener este combo. Pero no se puede encontrar ninguna otra información sobre cómo hacerlo en esta página ni en ningún otro lugar.
Por supuesto, no es tan importante forzar el uso de JavaScript, si con wkhtmltopdf pudiera funcionar alguna magia de CSS, sería tan increíble como cualquier otra solución de hackeo.
¡Gracias!
En realidad, es mucho más simple que con el fragmento de código. Puede agregar el siguiente argumento en la línea de comando: --footer-center [page]/[topage] .
Como mencionó Richard, hay más variables en la sección de pie de página y encabezados de wkhtmltopdf.org/usage/wkhtmltopdf.txt .
Enfoque seguro, incluso si usa XHTML (por ejemplo, con thymeleaf). La única diferencia con la solución de otro es el uso de // etiquetas.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script>
/*<![CDATA[*/
function subst() {
var vars = {};
var query_strings_from_url = document.location.search.substring(1).split(''&'');
for (var query_string in query_strings_from_url) {
if (query_strings_from_url.hasOwnProperty(query_string)) {
var temp_var = query_strings_from_url[query_string].split(''='', 2);
vars[temp_var[0]] = decodeURI(temp_var[1]);
}
}
var css_selector_classes = [''page'', ''topage''];
for (var css_class in css_selector_classes) {
if (css_selector_classes.hasOwnProperty(css_class)) {
var element = document.getElementsByClassName(css_selector_classes[css_class]);
for (var j = 0; j < element.length; ++j) {
element[j].textContent = vars[css_selector_classes[css_class]];
}
}
}
}
/*]]>*/
</script>
</head>
<body onload="subst()">
<div class="page-counter">Page <span class="page"></span> of <span class="topage"></span></div>
</body>
Última nota: si usas thymeleaf, reemplaza <script> con <script th:inline="javascript"> .
Entre algunos otros parámetros, el número de página y el número de página total se pasan al HTML del pie de página como parámetros de consulta , tal como se describe en los documentos oficiales:
... los argumentos de [número de página] se envían a los documentos html del encabezado / pie de página en forma GET.
Fuente: wkhtmltopdf.org/usage/wkhtmltopdf.txt
Entonces la solución es recuperar estos parámetros usando un poco de JS y renderándolos en la plantilla HTML. Aquí hay un ejemplo de trabajo completo de un HTML de pie de página:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function substitutePdfVariables() {
function getParameterByName(name) {
var match = RegExp(''[?&]'' + name + ''=([^&]*)'').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(//+/g, '' ''));
}
function substitute(name) {
var value = getParameterByName(name);
var elements = document.getElementsByClassName(name);
for (var i = 0; elements && i < elements.length; i++) {
elements[i].textContent = value;
}
}
[''frompage'', ''topage'', ''page'', ''webpage'', ''section'', ''subsection'', ''subsubsection'']
.forEach(function(param) {
substitute(param);
});
}
</script>
</head>
<body onload="substitutePdfVariables()">
<p>Page <span class="page"></span> of <span class="topage"></span></p>
</body>
</html>
substitutePdfVariables() se llama en onload cuerpo. Luego, obtenemos cada variable soportada de la cadena de consulta y reemplazamos el contenido en todos los elementos con un nombre de clase coincidente.
La forma en que DEBERÍA hacerse (es decir, si wkhtmltopdf lo admite) utilizaría los medios correctos CSS paginados: http://www.w3.org/TR/css3-gcpm/
Estoy investigando lo que tomará ahora.
Para mostrar el número de página y el total de páginas, puede usar este fragmento de JavaScript en su pie de página o código de encabezado:
var pdfInfo = {};
var x = document.location.search.substring(1).split(''&'');
for (var i in x) { var z = x[i].split(''='',2); pdfInfo[z[0]] = unescape(z[1]); }
function getPdfInfo() {
var page = pdfInfo.page || 1;
var pageCount = pdfInfo.topage || 1;
document.getElementById(''pdfkit_page_current'').textContent = page;
document.getElementById(''pdfkit_page_count'').textContent = pageCount;
}
Y llame getPdfInfo con la página cargada
Por supuesto, pdfkit_page_current y pdfkit_page_count serán los dos elementos que muestran los números.
Fragmento tomado de here