What code in html into a container to print A4 paper in two columns . English/Spanish

#1 · April 30, 2020, 5:14 pm

Hi Again.

I need to know how give instructions inside a container in html code to print over A4 paper in two or three columns like this image or in javascript code.

Spanish

Hola a todos, estoy imprimiendo un listado muy largo de nombres desde un "container2" con estas lineas de comando

BeginJS
var printContents = $('#Container2').html();
w = window.open();
w.document.write(printContents);
w.document.close();
w.focus();
w.print();
w.close();
EndJS

lo hace, pero la lista es tan grande que necesita seguir imprimiendo en otro A4 y lo que yo necesito es que cuando llegue al final de la página , continúe en otra columna paralela hasta terminar el listado. tal como muestro en la imagen que he subido.

Gracias.

nota: ya se que ese código no es html es propio de javascript , me valdria cualquiera de los dos o html o javascript.

Uploaded files:

You need to login to have access to uploads.

#2 · April 30, 2020, 5:53 pm

@joaquinfdez puedes intentarlo así. Ve al menú Project > Properties > Styles y añade el siguiente código CSS:

.columnas{
  column-count: 3;
  column-gap:30px;
}

Después selecciona el Container y en el panel de propiedades ve a Advanced > css-class y selecciona "columnas".
Si quieres más o menos columnas o separación entre ellas cambia los valores en el CSS. Lo que no tengo muy claro es si te lo va a respetar al imprimir tal y como haces la impresión (creo que sería mejor poner <div class="columnas"> al prinicipio, dentro del Container y cerrar el listado con un </div>

Fíjate que también puedes utlizar el plugin neoPDF para diseñar con mayor precisión en A4 y otros formatos (siempre y cuando no exportes a PhoneGap)

Saludos

#3 · April 30, 2020, 6:21 pm

ok Muchísimas gracias @luishp , lo voy a probar todo, así aprendo a manejarme con todas las posibilidades.

Thanks you !!

#4 · May 1, 2020, 9:21 am

Pues no lo consigo @luishp , me hace lo que me has sugerido dentro del container pero cuando le digo imprime me imprime todo en una sola columna. Te dejo el ejemplo para que lo veas.

Gracias de antemano

Uploaded files:

You need to login to have access to uploads.

#5 · May 1, 2020, 10:03 am

@joaquinfdez fíjate en el archivo que te adjunto.
Como lo que queremos imprimir es sólo el HTML del Container1 me he asegurado de que toda la imformación esté dentro del propio container y he puesto esto en su HTML:

<div id="imprimir" style="column-count:3;column-gap:40px">
</div>

Después he modificado el código del botón para que inserte el HTML con los datos no en el Container1 (ya que borraría lo que acabo de poner más arriba, sino en el div "imprimir". Así:

.Mira a ver cuantos datos hay en el array.
ArrayLen [misdatos] [total]
.Recorre el array completo
Loop 0 ([total]-1) [valorI]
   GetObjectHTML "imprimir" [html]
   .Separa el texto que se muestra y su valor en un array temporal.
   StrParse "[misdatos([valorI])" "|" [temparray]
   .Añade el texto que se muestra
   SetObjectHTML "imprimir" "[html][temparray(0)]<br>"
EndLoop

Ahora si que funciona :)

Uploaded files:

You need to login to have access to uploads.

#6 · May 1, 2020, 10:19 am

OK @luishp, ahora si que lo entiendo perfectamente.

Madre mía, me queda tanto por aprender ..

Enormemente agradecido.

What code in html into a container to print A4 paper in two columns . English/Spanish - Forum

What code in html into a container to print A4 paper in two columns . English/Spanish