23 votos

Impresión cuando textarea ha desbordamiento

Tengo un formulario con algunas áreas de texto que permiten una barra de desplazamiento cuando el texto excede el cuadro de texto. El usuario gustaría ser capaz de imprimir la pantalla, y este texto no es visible. ¿Cómo puedo hacer que todo el texto visible sólo para la impresión? Estoy mejor de hacer una impresión en pdf enlace o algo?

40voto

Alan H. Puntos3580

Usted no puede resolver este problema con CSS solo.

Por qué Puro CSS Soluciones son Insuficientes (con demostración)

Déjame convencerte de las respuestas relacionadas con la impresión de las hojas de estilo y overflow: visible son insuficientes. Abrir esta página y mira en la fuente. Justo lo que sugiere, a la derecha? Ahora la vista previa de impresión (en, digamos, Chrome 13 en OS X, me gusta). Tenga en cuenta que sólo se puede ver una línea o dos de la nota cuando intenta imprimir!

Aquí está la URL de mi caso de prueba de nuevo: http://dl.dropbox.com/u/105727/web/print_textarea.html

Soluciones:

  1. Un JavaScript enlace que abre una ventana nueva y se escribe el contenido del textarea para la impresión. O:

  2. Cuando el textarea es actualizado, copia su contenido a otro elemento que a su ocultos para la pantalla, pero se muestra cuando se imprima.

  3. (Si su textarea es de sólo lectura, luego de una solución de servidor también es viable.)

Tenga en cuenta que textareas el tratamiento de los espacios en blanco de manera diferente de HTML por defecto, así que usted debe considerar la posibilidad de aplicar el CSS white-space: pre-wrap; en la nueva ventana que se abre o a su ayudante, div, respectivamente. IE7 y mayores no entienden pre-wrap sin embargo, por lo que si es un problema, ya sea aceptar o usar una solución para ellos. o hacer que la ventana emergente realidad de texto sin formato, literalmente, se sirve con un tipo de medios de text/plain (que probablemente requiere de un componente de servidor).

La Impresión "Ayudante" de la Solución (con código + demo)

He creado una demo de uno de JavaScript técnica.

El concepto central es copiar el textarea contenido a otro ayudante de impresión. Código de la siguiente manera.

HTML:

<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>

CSS (todo / no-print):

/* Styles for all media */
#print_helper {
  display: none;
}

CSS (imprimir):

/* Styles for print (include this after the above) */
#print_helper { 
    display: block;
    overflow: visible;
    font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
    white-space: pre;
    white-space: pre-wrap;
}
#the_textarea {
  display: none;
}

Javascript (jQuery):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
  function copy_to_print_helper(){
    $('#print_helper').text($('#the_textarea').val());
  }
  $('#the_textarea').bind('keydown keyup keypress cut copy past blur change', function(){
    copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
  });
  copy_to_print_helper(); // on initial page load
});
</script>

De nuevo, el éxito de JavaScript basado en la demostración se encuentra en el http://dl.dropbox.com/u/105727/web/print_textarea_js.html.

3voto

GordonM Puntos14008

Hace poco me encontré con el mismo problema. Mi solución es duplicar el contenido en controles de formulario para la edición y en divs para la impresión.

En mi Cabeza, puse una hoja de estilo de impresión.

<link rel="stylesheet" href="printform.css" type="text/css" media="print" />

En printform.css pongo la siguiente

.screenOnly { display: none; }
.printOnly { display: inline-block; }

Para los textareas (y otros tipos de campo que estaban causando problemas) he utilizado el siguiente código

<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></div>

Cuando se muestra en pantalla los textareas se muestran y los divs duplicar su contenido se oculta. Cuando la impresión de lo contrario se aplica.

Yo sé que usted ya ha elegido una respuesta a esta pregunta, pero mientras que el uso de la hoja de estilo de impresión es una buena idea no describir una solución específica. Configuración de overflow:visible en el textarea (mi primera idea) no funcionan, así que terminé yendo con la solución anterior. Si sigues teniendo dificultades, espero que esto te ayuda

1voto

Ben G Puntos11

Sólo encourter el problema recientemente. Gracias por Alan H posts. Funciona perfecto con Chrome y Safari. Sin embargo, con IE y Firefox, el problema es que las últimas páginas(elementos de la página después de textarea) será falta de impresión(FF), páginas que faltan y se superponen diseño(IE9).

Otro hallazgo que será útil para resolver el problema, puede establecer textarea filas de propiedades correctamente como el control de la altura de dice para hacer el trabajo con CSS overflow:visible de las cosas. Todos los navegadores parece respetar las filas de la propiedad durante la impresión.

0voto

Kangkan Puntos7119

Definir un CSS separado para los medios impresos como esta <link rel="stylesheet" href="print.css" type="text/css" media="print" /> y para el área de texto, definir el desbordamiento de atributo como

overflow: visible;

0voto

Volomike Puntos7083

Puedo usar esto en mi estilo:

PRE.print {
display:none;
}

@media print {

  TEXTAREA {
    display:none;
  }

  PRE.print {
    display:block;
    width:90%; /* fixes margin issues in some funky browsers */
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    font-family:monospace,sans;
  }

}

Entonces, después de cada TEXTAREA, yo uso un PRE con la clase "imprimir" así:

<textarea id="message" name="message" rows="10" cols="80" onblur="updatePrint('#message')"><?= $MESSAGE ?></textarea>
<pre id="message-print" class="print">
<?= $MESSAGE ?>
</pre>

...nota el PHP que he usado -- puede cambiar con su lenguaje de programación. Y luego este código, por encima de las necesidades de la función siguiente, suponiendo que dispone de biblioteca jQuery cargado:

<script type="text/javascript">

function updatePrint(sID) {
  $(sID + '-print').text($(sID)[0].value);
}

</script>

La forma en que esto funciona

La forma en que esto funciona es que estoy básicamente de la carga de contenido dos veces en la página, pero el uso de la hoja de estilos para ocultar contenido no adecuado para la impresora como el TEXTAREA.

Usted puede cambiar el PRE estilo como usted desea. Sin embargo, yo uso la fuente monospace en caso de que alguien se quiere imprimir un código HTML que se escribió en el campo y quería que el formato de bien.

El evento onblur ayuda a capturar una necesidad de actualizar los relacionados con el PRE.

Nota también puede hacer la hoja de estilos cosas a través de los medios de comunicación atributo en un link rel en la sección HEAD del HTML, el uso de las cosas como los medios de comunicación="no" de la impresión y media="print".

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: