Imprimir solo un área de texto

Question

Me gustaría imprimir solo el contenido de un elemento textarea de una página web. En particular, me gustaría asegurar que nada quede recortado por el límite del área de texto ya que el contenido será bastante grande.

¿Cuál es la mejor estrategia para abordar esto?

Answer 1

Cree una hoja de estilo de impresión donde todos los elementos excepto el área de texto están configurados en CSS para mostrar: ninguno ;, y para el área de texto, desbordamiento: visible.

Enlace a la página con la etiqueta de enlace en el encabezado establecido en media = "print".

Ya ha terminado.

Answer 2

Haga un CSS diferente con conjunto de soportes para imprimir

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

http://webdesign.about.com/cs/css/a/aa042103a.htm

Answer 3

Si el usuario hace clic en "Imprimir", que podría abrir una nueva ventana con sólo el contenido del área de texto en una página en blanco e inicie la impresión desde allí, luego cierre esa ventana.

Actualización: Creo que las soluciones de CSS que se sugieren son probablemente mejores estrategias, pero si a alguien le gusta esta sugerencia, todavía pueden votarlo mejor.

Answer 4

Me gustaría ir a un combo de las otras sugerencias.

No mate el botón de impresión para toda la página con una anulación de hoja de estilo, sino que proporcione un botón junto al área de texto, que permita al usuario imprimir solo esos contenidos.

Ese botón abriría una nueva ventana, con menús/cromo, etc., y clonar el contenido de área de texto solamente (y o proporcionar un archivo de impresión CSS)

Answer 5

hice un CSS medios impresos para ocultar un número de los campos . El problema fue complicado por el hecho de que estaba usando nicEdit que crea dinámicamente un IFRAME. Así que tuve que agregar un evento que tomaba eventos borrosos y los copiaba a una Div (Div. Oculta) oculta. "divtext" es el div hiddent, y "storyText" es el TextArea.

textarea { 
    display: none; 
} 

*/ #divtext { 
    display: block; 
} 

div, DIV { 
    border-style: none !important; 
    float: none !important; 
    overflow: visible !important; 
    display: inline !important; 
} 

/* disable nearly all styles -- especially the nicedit ones! */ 

#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame { 
    display: none !important; 
} 

/*hide Nicedit buttons */ 

.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt { 
    display: none !important; 
} 

el código Javascript para NicEdit:

<script type="text/javascript" src="/media/nicEdit.js"></script> 
<script type="text/javascript"> 
    bkLib.onDomLoaded(function() { 
    var nic = new nicEditor({ 
     fullPanel: true 
    }).panelInstance('storyText'); 

    document.getElementById("storyText").nic = nic; 
    nic.addEvent('blur', function() { 
     document.getElementById("storyText").value = 
     nic.instanceById('storyText').getContent(); 
     document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent(); 
    }); 
    }); 
</script> 

Answer 6

¿El overflow: visible; en textarea realmente funciona para cualquiera de ustedes? FF3 parece ignorar esa regla en textarea en hojas impresas. No es que sea un error ni nada.