Alternativa para el salto de página dentro: evitar

Tengo una página que genera cupones. Cada cupón es div con una altura que varía según el contenido. Quiero imprimir tantos cupones en cada página como sea posible, pero no quiero que los cupones se dividan en varias páginas. La propiedad CSS page-break-inside hace exactamente lo que necesito. Sin embargo, necesito que esto funcione para Firefox y/o Chrome. Y this is not supported. Two years y one year ago se hizo la misma pregunta, y no había una buena alternativa para esto. Somos mucho más desarrolladores de CSS3/HTML5/general ... ¿hay alguna alternativa para que esto funcione?Alternativa para el salto de página dentro: evitar

Ejemplo está aquí: http://jsfiddle.net/e3U66/2/

Supongamos que una página, cuando se imprime, mide 1000px. Quiero que el segundo DIV aparezca en la segunda página, porque de lo contrario se divide en el primero y el segundo. Este código funciona en Opera, pero no en FF o Chrome.

Fuente

2011-05-24 Anonymous

un código de ejemplo en un jsFiddle sería útil – William

Tan pronto como su están hablando de impresión, si quiere control absoluto, es mejor que genere archivos PDF sobre la marcha. –

@Lime: jsfiddle added –

Por qué no, una vez cargada la página con su contenido, use js para desplazarse por el contenido y sumar el alto de div s.

Una vez que haya alcanzado 1000px o lo que sea que haya determinado a ser la altura de la página, a continuación, insertar un espacio en blanco div de estilo con page-break-before antes de la última div.

Fuente

2011-06-25 21:16:23

Si puedo encontrar algo más de tiempo, intentaré encontrar algo –

+1, el manual 'page-break-before' /' page-break-after' es lo único que tiene soporte de navegadorTu desafío es descubrir dónde quieres los descansos. Simplemente puede romper después de cada cupón (un cupón por página). – SpliFF

@JasonGennaro ¿Alguna vez resolvió algo? –

-2

establece flotar a la izquierda para estos div y establece ancho como 100%. No lo probaré. Puede funcionar.

Fuente

2011-06-24 19:18:21

Lamentablemente, esto no tiene ningún efecto. Todavía se rompe, excepto en Opera. –

¿puedes publicar código de muestra aquí? –

Ver el enlace en la publicación original –

Honestamente, solo recomendaría crear imágenes de los cupones en realidad o generar un pdf. Supongo que probablemente ya esté generando códigos de barras para todos los cupones, por lo que generar las imágenes en sí no debería ser demasiado difícil usando php (o cualquiera que sea la elección del código).

Aquí hay alguna información sobre la creación de imágenes php, pero SO probablemente sería una mejor fuente de ejemplos.

http://php.net/manual/en/function.imagecreate.php

entonces se podría simplemente una lista de las imágenes.

<img src> 
<img src> 
<img src> 
...

No tiene sentido que recree la rueda.

Fuente

2011-06-25 22:10:38 William

A continuación una solución hecha con la ayuda de librería Prototype (1,7)

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Title of the document</title> 
<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript"> 
//page height in px 
//thisPageTotal is the total of pixels on the current page, in px 
pageHeight = 1000; 
thisPageTotal = 0; 

Event.observe(window, 'load', function(){ 
    $$('.coupon').each(function(el){ 
     var layout = el.getLayout(); 
     thisPageTotal += parseInt(layout.get('margin-box-height')); 
     if(thisPageTotal > pageHeight) { 
      thisPageTotal = parseInt(layout.get('margin-box-height')); 
      var pageBreak = new Element('div', { 
       'class': 'pagebreak' 
      }); 
      el.insert({before: pageBreak}); 
     } 
     //this shows the current amount of px on the current page 
     el.update(thisPageTotal); 
    }); 
}); 
</script> 

<style type="text/css"> 
div { 
    border: 1px solid #000; 
    margin: 30px; 
} 

.pagebreak { 
    page-break-after: always; 
} 
</style> 
</head> 

<body> 
    <div id="div_1" class="coupon" style="height: 500px"></div> 
    <div id="div_2" class="coupon" style="height: 200px"></div> 
    <div id="div_3" class="coupon" style="height: 500px"></div> 
    <div id="div_4" class="coupon" style="height: 200px"></div> 
    <div id="div_5" class="coupon" style="height: 200px"></div> 
    <div id="div_6" class="coupon" style="height: 400px"></div> 
    <div id="div_7" class="coupon" style="height: 300px"></div> 
    <div id="div_8" class="coupon" style="height: 400px"></div> 
    <div id="div_9" class="coupon" style="height: 500px"></div> 
    <div id="div_10" class="coupon" style="height: 200px"></div> 
</body> 
</html>

Tal vez ayuda a

Fuente

2011-06-29 12:08:17

jquery https://jsfiddle.net/alexz15/hegeb3de/ – alex

Alternativa para el salto de página dentro: evitar

Respuesta

Cuestiones relacionadas