Forzar un salto de página en la impresión

En la línea de los artículos relacionados con la impresión, en este taller te presentamos el procedimiento a utilizar para forzar un salto de página al imprimir una página Web desde el navegador.

Introducción

Si has tratado nunca de imprimir una página Web a menudo habrás sido víctima de saltos de página en secciones inesperadas y poco prácticas. Esto puede evitarse aplicando un pequeño recurso de DHTML (y más concretamente hojas de estilo) para Internet Explorer y mediante un truquillo muy sencillo en el caso de Netscape.

En ambos casos deberás disponer de versiones 4.0 o superior. No se pretende juzgar que navegador implementa mejor esta característica (en otros sitios web encontrarás extensa documentación a favor y en contra de ambos), simplemente selecciona el código que necesitas (en el mejor de los casos aplica ambos trucos) o pruebalo tu mismo imprimiendo esta página de ejemplo.

Para Internet Explorer (versión 4.0 o superior)

Debes crear una hoja de estilos y definir el tag H1 del como sigue: (recuerda que debes insertar el tag style dentro del tag head del documento).

<STYLE>
 H1.SaltoDePagina
 {
     PAGE-BREAK-AFTER: always
 }
</STYLE>

En el sitio en que quieras forzar el salto de página deberás poner el tag h1 aplicando el estilo SaltoDePagina definido anteriormente.

<H1 class=SaltoDePagina> </H1>

Para Netscape Navigator (versión 4 o superior)

Netscape no procesa el estilo PAGE-BREAK-AFTER con lo cual deberemos aplicar un truco simple pero efectivo para conseguir nuestro propósito.

Inserta todos aquellos contenidos que deseas se incluyan en una página dentro de una tabla ya que cuando una tabla no puede imprimirse por completo en una página Netscape fuerza un salto de página. Por ejemplo:

<table>
<tr><td>
Introduzca aquí los contenidos correspondientes a la página 1.
</td></tr>
</table>
<table>
<tr><td>
Introduzca aquí los contenidos correspondientes a la página 2.
</td></tr>
</table>

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
HAY 58 COMENTARIOS
  • Chago dijo:

    Al fin! Muchas gracias, esto me supone la solución a un problema que me estaba rompiendo la cabeza

  • Rafael Ortega dijo:

    Muchas gracias por la ayuda, tengo días sin dormir buscando una solución.

  • Rafael Ortega dijo:

    Muchas gracias por la ayuda, tengo días sin dormir buscando una solución.

  • Albert dijo:

    Que dios te lo page con muchos hijos...!!! Nos has ahorrado 1.000.000 de $. Un saludo

  • Francisco Parra dijo:

    Me sirvio mucho, me habia roto la cabeza tratando de hacerlo GRACIAS!!!!

  • Erika dijo:

    Me solucionaste un gran problema...

  • Edwin Molina dijo:

    Esté ejemplo está muy bueno, de verdad nos has ayudado a solucionar mucho trabajo. Para controlar la paginación de nuestros reportes en la web

  • Jaime dijo:

    He probado la solucion que das para NS con NS 4.7 y no funciona, me explico, he puesto dos tablas una que ocupa aprox el 75% de la pantalla y otra que ocupa mas y no imprime las tablas por separado en distintas paginas, eso si el esilo funciona de put* madre pero es solo para la familia MSIE, en fin larga vida a las CSS compatibles con IE

  • Amaury Alvarez Helgueros dijo:

    Yo tengo IE 5.0 y no me funcionaba, entonces le aumente el codigo que según es para el Netscape y solamente me funciono así Ejemplo: ******texto *******texto claro que tienes que tener el: H1.SaltoDePagina { PAGE-BREAK-AFTER: always }

  • Amaury Alvarez Helgueros dijo:

    Yo tengo IE 5.0 y no me funcionaba, entonces le aumente el codigo que según es para el Netscape y solamente me funciono así Ejemplo: table tr td ******texto /td /tr /table H1 class=SaltoDePagina&nbsp; td *******texto /td /tr /table (los signos ( H1.SaltoDePagina { PAGE-BREAK-AFTER: always } /STYLE

  • Javi dijo:

    Gracias por el código. Vale para el trabajo que debo realizar. Pero una pequeña pega: Cuando quiero realizar el salto de página, a mi me funciona si escribo lo siguiente &nbsp; Si quito la cadena &nbsp; deja de funcionar. Muchas Gracias !! Saludos

  • Pilar dijo:

    Me podría alguien especificar para que navegador netscape funciona este truco? Yo he probado con NS4.0 y con NS6.1 y no funciona con ninguno de los dos.

  • Jaume y Jordi dijo:

    Esto nos acaba de salvar la vida!!!!! Muchas gracias. Usamos IE6 y funciona de cine.

  • Sonia dijo:

    Me podría alguien mandar un ejemplo del código necesario para forzar los saltos de página en IE5. Es urgente. Muchas Gracias.

  • carlos dijo:

    necesito ayuda urgente para ie 5.0 no me funciona el salto . me podiais mandar un ejemplo. Muchisimas gracias.

  • Julio dijo:

    Escribiendo &nbsp; funciona para IE. Por cierto: Si alguien sabe como imprimir en apaisado desde JavaScript estaría muy agradecido.

  • F.T.P. dijo:

    Pues que alguien m lo cuente, pq no funciona en netscape Introduzca aquí los contenidos correspondientes a la página 1. Introduzca aquí los contenidos correspondientes a la página 2.

  • Txupass & Chesco dijo:

    Lo que nos habeis enseñado es lo unico que nos faltaba para ser ricos... MUCHISIMAS GRACIASSSSSSSS

  • Maroun Stephen dijo:

    Por favor podrian enviarme algún código de ejemplo para realizar un salto de página dentro de un ciclo, es decir estoy trabajando con java y HTML estoy trantando de inprimir unlistado que se genera dentro de un ciclo. trabajano con IE 5.5 Muchas Gracias de antemano.

  • Wilmer García dijo:

    Sabes, podrías enviarme una parte de código con el ejemplo ya que no me funciona en IE5.0. Muchas Gracias.

  • Wilmer García dijo:

    Me imagino que si lo pongo dentro de un ciclo, se comporta igual. ???? Muchas Gracias.

  • @pple dijo:

    Supongo que eso esta bien pero a mi no me ha funcionado. Utilizo iE5.0. Un saludo y hasta pronto. @pple

  • DAVID dijo:

    Para los que no les funcionen estas instrucciones probar PAGE-BREAK-BEFORE

  • Patricio Carrasco dijo:

    El ejemplo mostrado no funciono alguna persona tiene una pagina con este codigo funcionando para verlo, si es posible que lo envién.... gacias

  • Jose Antonio Ibañez dijo:

    Y donde quieres hacer el salto de pagina al imprimir se añade

     

  • Jose Antonio Ibañez dijo:

    "" "" "" Y donde quieres hacer el salto de pagina al imprimir se añade "

     

    "

  • Jose Antonio Ibañez dijo:

    
    
    
    
    
    Y donde quieres hacer el salto de pagina al imprimir se añade
    
    

     

  • Eugênio Neves dijo:

    Gracias. Me lo has ahorrado centos de horas. Me estaba rompendo la cabeza

  • rolando palma franco dijo:

    tengo mi pagina pero el problema que al mandarla a imprimir normal osea vertical la pagina sale cortada de un costado ya que el texto se sale del area de impresion y de forma horizontal sale completa, yo lo que quiero esque me salga completa de forma vertical habra alguna forma, te agradezco tu ayuda.gracias.

  • Rubencio dijo:

    Muchas gracias por el código. Pero sabríais de una manera para que la inserción de los saltos fuera dependiente del tamaño de los datos? Es decir, tengo una página con textareas sin una altura fija y tablas sin un numero de registros fijos. Así, no sé exactamente donde insertar el salto de página, demenpe del número de rows que tienen las textareas y del número de registros que el usuario introduce en las tablas. He probado a introducir esta instrucción con el valor auto. Así: page-break-before:auto en todos los lugares donde se puede producir un salto de página, pero no funciona. ¿Alguien conoce la solución? Muchas gracias por todo.

  • Rubencio dijo:

    Otro problema con el que me he encontrado, es que, al insertar un salto de página, lo que queda de la página antes de ese salto de página se justifica verticalmente, es decir, que los elementos de la página se estiran para cubrir toda la página. A mi lo que me interesaría es que todo lo que queda en esa página, quedara alineado verticalmente en el top, dejando el hueco en la parate de abajo. ¿a alguien le ha pasado esto también? Muchas gracias por todo y saludos.

  • Oscar dijo:

    Ademas de controlar el salto de pagina, existe alguna manera de controlar mas propiedades del navegador a la hora de imprimir (tamaño hoja, margenes, encabezado, pie de pagina ,...)

  • Patricio dijo:

    Hola Sabes escribi el codigo en una pagina ASP pero no funciona dime cual puede ser el problema Gracias

  • Mar dijo:

    Hacia dias que me estaba rompiendo la cabeza...

  • Melissa dijo:

    Gracias! en verdad me ahorraste mucho tiempo de buscar la forma de hacer eso. Ahora me gustaria saber si se puedo establecer los margenes de impresion mediante codigo. He buscado pero hasta ahora no encuentro una solución. Muchas gracias :)

  • Irene dijo:

    Solo un apunte. En las versiones de IE 4.0 y 5.0 si entre las etiquetas que fuerzan el salto de página no se encuentra un caracter no se produce el salto de página. Ejemplo:  

  • Ramon Sosa Reyes dijo:

    en cualquier etiqueta que acepte la propiedad style pueden ser , etc ejemplo

  • Ramon Sosa Reyes dijo:

    en cualquier etiqueta que acepte la propiedad style pueden ser , etc ejemplo

  • Ramon Sosa Reyes dijo:

    en cualquier etiqueta que acepte la propiedad style pueden ser , etc

  • Tavo dijo:

    No lo hubiera sacado jamas. MUCHAS GRACIAS.

  • Juanma dijo:

    Muy agradecido, el tema me tenía loco y ya no sabía a quien preguntar. Con gente como tú da gusto dedicarse a esto de la informática.

  • Sergio Brito dijo:

    Tu aporte ha resultado en una gran solución.. Gracias.

  • claudio dijo:

    Gracias por tener a disposicion este codigo. funciona correctamente

  • Marco E. dijo:

    Muchas gracias... me funcionó a la primera.. =)

  • Julian dijo:

    Este es el ejemplo de un código sencillo pero bastante útil. Esto es de gran ayuda para la comunidad MUCHAS GRACIAS.

  • ivan dijo:

    Muchas gracias por esta ayuda, me ha funcionado a la primera.

  • Salvador.Bordón dijo:

    Muy práctico y útil, gracias

  • Kent dijo:

    Facil y eficiente Codigo, como principiante también es entendible

  • Andres dijo:

    Hola. Llevo tiempo buscando la forma de insertar un salto de pagina de forma automatica en una pagina y no he dado con la solucion. A parecer tendria que funcionar poniendo page-break-before:auto pero no es asi. El problema que tengo es que quiero que la informacion contenida en una tabla me la muestre completa en la pagina actual , y en caso de que no haya sitio suficiente en la pagina actual me haga un salto de pagina.

  • Edgar dijo:

    Muy buen codigo... listo para usarse

  • Jules dijo:

    Estupendo, funciona de maravilla

  • Lucio dijo:

    Hola, tengo una duda, esto nos ayuda a administrar la impresion??? A que me refiero: Si tengo una pagina PHP llena de TEXTAREAS y TEXTINPUTS que se llenan mediante consultas MYSQL (Lo que quiere decir que con el tiempo cambian de tamaño por el texto y el contenido) El salto de linea considera esos cambios?? Yo estaba buscando algo que me ayude a saber cuantas paginas se van a imprimir, o algo que me diga en que pagina me encuentro, algo asi como encabezado o marca de agua o un texto por ahi. Saludos y gracias por la atencion!

  • Daniel dijo:

    Hola a todos 1-realizo una busqueda en php-mysql 2-me arroja una serie de recibos generados con los datos de la base, pero al querer imprimirlos se desfasa y salen recibos cortados 3pregunta, ¿como inserto un salto de pagina cada 2 resultados? o sea quiero 2 recibos por hoja A4

  • Osvaldo dijo:

    al principio una parte y donde va el salto de pagina la otra parte, y me funciono, muchas gracias....

  • dario dijo:

    Funciona perfecto para internet explorer 6, pero para el 7 no hace el salto de página. Alguien sabe como hacerlo Gracias

  • dario dijo:

    Como ponía en otros comentarios para otras versiones, si se pone   entre los h1 donde se fuerza el salto de página, funciona correctamente

  • Rubén C. dijo:

    Agradezco el aporte me funciono perfectamente en IE7, únicamente agrege ; al final de la línea del salto y en lugar de utilizar utilicé un , de igual manera funciona perfectamente! Saludos

  • Rubén C. dijo:

    en el comentario anterior se omitieron los corchetes de las etiquetas, decía que en lugar de utilizar el H1 utilicé la etiqueta DIV, de igual manera debe de funcionar con cualquier otra etiqueta. Saludos

Conéctate o Regístrate para dejar tu comentario.