javascript - poner - Insertar marcas de plegado en cada página(wkhtmltopdf)
marcas de corte illustrator (2)
Estoy usando wkhtmltopdf 0.12.2.1 para crear facturas y así sucesivamente.
Necesito mostrar marcas de plegado en cada página en un pdf. ¿Cómo puedo repetirlos con javascript en cada página, si el contenido es mayor que uno?
Ese es mi marcado básico.
<!DOCTYPE html>
<html>
<head>
<title>PDF Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body id="pdf-page">
<div class="marks">
<div class="mark mark-top mark-left"></div>
<div class="mark mark-top mark-right"></div>
<div class="mark mark-middle mark-left"></div>
<div class="mark mark-bottom mark-left"></div>
<div class="mark mark-bottom mark-right"></div>
</div>
<div id="print-area">
<div id="letter-head"></div>
<div id="subject-line">Subject</div>
<div id="document-content">
....
....
....
</div>
</div>
</body>
</html>
Se parece básicamente a esa Image
Bueno, esto me tomó días para resolver esto ... debido a la falta de ejemplos en Internet (para PHP / HTML / Javascript). Tenemos los siguientes pasos:
- Obtenga el DPI de su documento
- establecer el elemento en el tamaño de página real (fuera de la vista)
- crear envoltorio / elemento de página (su caso
.marks) - determinar si el contenido de la página necesita varias páginas para encajar en
Nota: estoy haciendo esto sin probar, etc. y necesitas jugar un poco, por supuesto.
...
<div class="marks">
<div class="mark mark-top mark-left"></div>
<div class="mark mark-top mark-right"></div>
<div class="mark mark-middle mark-left"></div>
<div class="mark mark-bottom mark-left"></div>
<div class="mark mark-bottom mark-right"></div>
</div>
...
<script>
// some static stuff found it somewhere on the internet
var PDF = {
width: 8.27, // inches, 210mm
height: 11.65, // inches, 296mm
margins: {
top: 1.97, left: 0.34,
right: 0.393700787, bottom: 0.393700787
}
};
$(document).ready(function() {
// get page sizes by creating ''shadow'' element
var pageSize = $(''<div></div>'')
.css({
height: PDF.height +''in'', width: PDF.width +''in'',
top: ''-100%'', left: ''-100%'',
position: ''absolute'',
})
.appendTo(''body'');
// set debug element
$(''.debug'').html(pageSize.height());
// set every page elements .marks to proper height
// dont forget the substract the header and footer height
$(''.marks'').height(pageSize.height() - footerHeight - headerHeight);
// @TODO: duplicate .marks to times a pages is created, and !!maybe!! set the top of .marks with pageSize.height()
});
</script>
He encontrado mi inspiración para el código here .
Esto funcionó para mí porque tenía elementos de altura fija y necesitaba repetirlos en la página (en mi .wrapper elm igual que tus .marks y eran elementos "relativos"). De esta manera, podría determinar cuándo ''abrir'' una nueva página cerrando .marks en su caso.
Sé que este hilo es antiguo, pero acabo de tener el mismo problema y también pasé muchas horas en él. El problema básico es que wkhtml simplemente no conoce el número de páginas que resultarán, antes de que se haya procesado. Es por eso que solo el encabezado / pie de página obtiene esa información.
Calcular algo con DPI no tiene ningún sentido porque $(document).height() siempre devolverá el mismo valor independientemente de la configuración de DPI. Además, esta altura no se devuelve correctamente de todos modos; Lo probé con "bloque de texto, bloque de texto, bloque de texto" = 4500 px, "bloque de texto, imagen, bloque de texto, imagen, bloque de texto, imagen" = 4560 px, a pesar de que las imágenes tienen> 500px de altura cada una. Entonces, este camino no lleva a ninguna parte.
Mi solución de trabajo:
- Genere el HTML y genere el PDF (sin un TOC).
- Use la herramienta de línea de comandos "pdfinfo" para obtener el número real de páginas .
- Genere el HTML nuevamente, pero esta vez, pase el número de páginas.
- En su HTML, haga algo como esto (adapte esto a su lenguaje de plantilla):
$factor = 100 / $totalPages; // = 25 con 4 páginas
for ($pageNum = 1; $pageNum <= $totalPages; $pageNum++) { $html .= ''<div style="position: absolute; top: '' . ($factor*$pageNum)-($factor/2) . ''%"></div> }
- Obtendrá 4 DIV con los atributos "principales" de
25-12.5,50-12.5,100-12.5,100-12.5por ciento. - Render el PDF
- Se feliz por fin
Estoy usando wkhtml 0.12.3 con qt parcheado.