¿Cómo se puede hacer que una página web envíe a la impresora algo diferente de lo que hay en la ventana del navegador?

StackOverflow https://stackoverflow.com/questions/85019

  •  01-07-2019
  •  | 
  •  

Pregunta

Google Maps solía hacer esta parte en la que cuando presionabas el enlace "Imprimir", lo que se enviaba a la impresora no era exactamente lo que tenía en la pantalla, sino más bien una versión con un formato diferente de prácticamente la misma información.

Parece que se han alejado en gran medida de este concepto (supongo que la gente no lo entendió) y la mayoría de los sitios web tienen una "versión impresa" de cosas como artículos, etc.

Pero si quisiera crear una página web de modo que lo que se envíe a la impresora sea una versión "apto para imprimir" de la página sin tener que crear una página separada, ¿cómo lo haría?

Hacer un seguimiento:¿Se pueden imprimir cosas que no se muestran en la página?(es decir, oculto para que no se esté renderizando actualmente)?

¿Fue útil?

Solución

Sí, puedes aplicar un CSS de impresora.Hay un buen articulo al respecto. aquí.

Otros consejos

Puede lograr este efecto creando una hoja de estilo CSS destinada directamente a la impresión y otra destinada directamente a la pantalla.

Utilice la etiqueta de enlace:

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

para incrustar su hoja de estilo en su documento.

Ocultar es fácil, simplemente configure el estilo de su bloque como oculto en cualquier hoja de estilo que desee y no se mostrará.Por ejemplo:

.newStyle1 {
    display: none;
}

Entonces cualquier cosa configurada al estilo de newStyle1 no se mostrará.

Puede hacer esto con CSS cuando especifica medios como impresión.

El @media La regla en CSS se puede usar para definir reglas alternativas para la impresión. Esto se usa a menudo para ocultar la navegación y cambiar el estilo para que se ajuste mejor a la impresión:

@media print {
  .sidebar { display: none; }
}

También puede vincular una hoja de estilo separada para imprimir:

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

Otra forma, si lo desea, es hacer que el botón 'Imprimir' en la página cambie la página de alguna manera que decida, luego realice un JavaScript 'Window.print ();' Para mencionar el diálogo de impresión del navegador.

Hay varias opciones disponibles para usted:

  • Puede abrir una nueva ventana con datos ligeramente diferentes para imprimir.
  • También hay estilos CSS que puedes utilizar para modificar el diseño de la página.
  • Finalmente, puede especificar hojas de estilo completamente diferentes para pantalla, medios impresos, lectores Braille, etc.

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

Ver también Referencia de impresión CSS2

Usar una imprimir hoja de estilo.

Editar: Con respecto al seguimiento, en general no se pueden agregar cosas a una página con CSS.

Una opción es incluir contenido solo para impresión en la página y ocultarlo para las hojas de estilo en pantalla.Sin embargo, debes asegurarte de que la página aún tenga sentido sin CSS.

Otra opción es utilizar contenido generado, pero esto no es compatible con Internet Explorer 7 y versiones anteriores y puede ser bastante limitado.

Si el contenido sólo para impresión es una imagen, puede intercambiarla utilizando una de las técnicas populares de reemplazo de imágenes.

La forma más sencilla es utilizar tipos de medios CSS.Para cada archivo CSS que incluya, puede especificar dónde debe usarse:en pantalla, al imprimir, para dispositivos portátiles, para lectores de pantalla o varias combinaciones de estos.

Ejemplo: <link rel="stylesheet" type="text/css" media="impresión, dispositivo portátil" href="foo.css">

Este ha sido un estándar desde CSS2 y la mayoría de los navegadores lo admiten ahora.Más información está disponible aquí: http://www.w3.org/TR/CSS2/media.html

CSS le permite crear hojas de estilo para tipos particulares de medios, lo que significa que puede tener una hoja de estilo que solo se aplica cuando imprime una página, lo que le permite darle un formato diferente.

Simplemente incluya un atributo media="print" en el enlace de su hoja de estilo para esa hoja de estilo.

Este Un artículo de lista aparte Parece ser bastante bueno en el tema.

Intenté usar diferentes hojas de estilo según los medios, pero tuve problemas para obtener todas las opciones que necesitaba.Desde entonces, normalmente redirijo a una entrada diferente de nuestro marco (Fusebox) (es decir,print.php en lugar de index.php) que en esencia es el mismo archivo excepto que establece una bandera/constante adicional.

En el archivo XSL asociado con la página, luego hago trabajo adicional basado en ese indicador/constante, como omitir el menú, las columnas de una tabla, etc.

es decir.(La página muestra un enlace en el que el usuario debe hacer clic para mostrar la contraseña en la pantalla.La versión impresa tiene la contraseña impresa).

if (!BOOL_PRINT)
  echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
  echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";

Puede definir reglas CSS que sean específicas de un tipo de medio.El siguiente es un ejemplo CSS (copiado de http://www.w3.org/TR/CSS2/media.html, sección 7.2.1) que especifica diferentes tamaños de fuente lo que se muestra en una página web y lo que se imprime. 

 @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Alternativamente, puede especificar a qué medio se debe aplicar una hoja de estilo al incluirla en una página:

 <link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
 <link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
 <link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>

Otra opción más es tener un IFRAME oculto al que llames iframe.contentWindow.print().Eso le permitirá crear un diseño invisible que se imprima exactamente como usted desea.

Por supuesto, una solución aún mejor es exportar el archivo a PDF y dejar que el usuario lo imprima de esa manera.Los archivos PDF producen resultados de la más alta calidad, punto.Sin embargo, es un obstáculo más que el usuario debe superar, por lo que la regla general es:

  • Archivos PDF para cuando el diseño de impresión sea importante
  • HTML para cuando el texto puro es más importante que el diseño

Todo lo que puedas hacer con CSS lo puedes hacer en una hoja de estilo impresa.Esto significa que puede ocultar el contenido en la versión impresa que se muestra en la versión en pantalla u ocultar el contenido en la versión en pantalla que desea mostrar al imprimir. Todo lo que debe hacer es aplicar display:none a las secciones apropiadas en la hoja de estilo apropiada.

También es una buena idea dimensionar el texto en puntos para la versión impresa (que es una malo idea para la versión de pantalla: limítese a píxeles, ems o porcentajes aquí).Existe un acuerdo universal sobre cuáles son los tamaños de puntos impresos y dónde las asignaciones de píxeles a puntos variarán con diferentes dispositivos de resolución.

Aquí hay otro enlace de A List Apart sobre la impresión CSS llamado Imprimir un libro con CSS:¡Auge! http://www.alistapart.com/articles/boom/

nsayer menciona que tener un botón de impresión cambia el diseño de la pantalla y luego inicia un window.print()

Esta es una solución que probablemente mucha gente habrá pasado por alto y debería considerarse cuando crea que sus usuarios quieren un poco más de WYSIWYG.Sin embargo, probablemente debería ser un enlace "apto para imprimir" que cambie el tipo de medio de sus hojas en lugar de "imprimir esto".

Usando jquery, podrías hacer algo como esto (no marcado):

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top