javascript - only - Paginating HTML document para imprimir con navegadores basados ​​en WebKit

failed to execute ''requestfullscreen'' on ''element'': api can only be initiated by a user gesture.

Question

Internet Explorer tiene el motor Print Template , donde puedo usar el elemento DEVICERECT para representar una página física, luego uso el elemento LAYOUTRECT como una vista rectangular para pasar el documento HTML a la página e impulsar la paginación. Eso evita que las líneas se corten en el medio entre páginas adyacentes. Este mecanismo se describe en detalle aquí .

¿WebKit proporciona una característica similar? Específicamente, ¿PhantomJS lo hace? Estoy buscando algo que permita paginar un documento HTML existente que no tenga saltos de página predefinidos, y verlo paginado como un nuevo documento HTML o PDF transformado, sin líneas cortadas en el centro.

Answer 1

El motor del navegador debe encargarse de todo y puede ayudarlo utilizando una hoja de estilo para media="print" .

Por ejemplo, para forzar saltos de página de modo que cada encabezado de nivel 1 o 2 ( <h1> o <h2> ) se coloque al comienzo de una nueva página use page-break-before :

h1, h2 { page-break-before:always; }

En Chrome, IE & Opera puedes controlar viudas y huérfanos , pero aún no ha llegado a WebKit, así que por ahora podrías usar

p { page-break-inside: avoid;  } 

para evitar saltos de página dentro de los párrafos.

Incluso puede controlar los márgenes de las páginas primera, izquierda y derecha por separado.

Phantom''s render() utiliza hojas de estilo para medios impresos si el resultado es un archivo pdf. rasterize.js ejemplo rasterize.js parece una solución de impresión lista para usar.

Answer 2

Esta función funciona bien.

$(function () {
    $("#print-button").on("click", function () {
        var table = $("#table1"),
            tableWidth = table.outerWidth(),
            pageWidth = 600,
            pageCount = Math.ceil(tableWidth / pageWidth),
            printWrap = $("<div></div>").insertAfter(table),
            i,
            printPage;
        for (i = 0; i < pageCount; i++) {
            printPage = $("<div></div>").css({
                "overflow": "hidden",
                "width": pageWidth,
                "page-break-before": i === 0 ? "auto" : "always"
            }).appendTo(printWrap);
            table.clone().removeAttr("id").appendTo(printPage).css({
                "position": "relative",
                "left": -i * pageWidth
            });
        }
        table.hide();
        $(this).prop("disabled", true);
    });
});

Esto dividirá toda la tabla en múltiples secciones ...

Aquí está el violín

Código tomado de este artículo y esta página .