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

titulo de pagina html

Question

Google Maps solía hacer este punto donde cuando pulsas el enlace "Imprimir", lo que se enviaría a la impresora no era exactamente lo que tenías en la pantalla, sino más bien una versión con formato diferente de casi la misma información.

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

Pero si desea crear una página web de tal manera que una versión de la página "compatible con la impresora" sea lo que se envíe a la impresora sin tener que crear una página separada, ¿cómo lo haría?

Seguimiento : ¿se pueden imprimir cosas que no se muestran en la página? (es decir, oculto de la representación actual)

Answer 1

CSS le permite crear hojas de estilo para determinados tipos de medios, lo que significa que puede tener una hoja de estilo que solo se aplica cuando está imprimiendo una página, lo que le permite hacer que tenga un formato diferente.

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

Este artículo de A List Apart parece ser bastante bueno sobre el tema.

Answer 2

Hay varias opciones disponibles para usted:

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

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

Consulte también Referencia de impresión CSS2

Answer 3

Intenté usar diferentes hojas de estilo basadas en los medios, pero tuve problemas para obtener todas las opciones que necesitaba. Desde entonces, por lo general, me dirijo a una entrada diferente de nuestro framework (Fusebox) (es decir, print.php en lugar de index.php) ) que en esencia es el mismo archivo, excepto que establece un indicador / constante adicional.

En el archivo XSL asociado con la página, hago un trabajo adicional basado en esa bandera / constante, como dejar fuera el menú, las columnas de una tabla, etc.

es decir, (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";

Answer 4

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

Ejemplo: <link rel = "stylesheet" type = "text / css" media = "print, handheld" 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

Answer 5

La regla @media en CSS se puede usar para definir reglas alternativas para imprimir. A menudo se usa 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" />

Answer 6

Otra forma, si lo desea, es hacer que el botón ''imprimir'' en la página cambie la página de alguna manera que usted decida, luego realice un javascript ''window.print ();'' para que aparezca el cuadro de diálogo de impresión del navegador.

Answer 7

Otra opción es tener un IFRAME oculto al que llame iframe.contentWindow.print (). Eso le permitirá crear un diseño invisible que se imprime exactamente como lo desea.

Por supuesto, una solución aún mejor es exportar el archivo a un PDF y dejar que el usuario lo imprima de esa manera. Los PDF producen la producción de más alta calidad, punto. Sin embargo, es un aro más para que el usuario salte, por lo que la regla de oro es:

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

Answer 8

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

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

De forma alternativa, puede especificar a qué medio debe aplicarse una hoja de estilo cuando la incluya 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"/>

Answer 9

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

Answer 10

Use una hoja de estilo de impresión .

Editar: Respecto al seguimiento, no se puede, en general, agregar elementos a una página con CSS.

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

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

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

Answer 11

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

También es una buena idea clasificar el tamaño del texto en puntos para la versión impresa (lo cual es una mala idea para la versión de la pantalla: adhiérase a píxeles, ccsme o porcentajes aquí). Existe un acuerdo universal en cuanto a los tamaños de puntos impresos donde las asignaciones de píxeles a puntos variarán con los diferentes dispositivos de resolución.

Answer 12

Aquí hay otro enlace de A List Apart con respecto a imprimir css llamado Printing a Book with CSS: Boom! http://www.alistapart.com/articles/boom/

Answer 13

nsayer menciona tener un botón de imprimir para cambiar el diseño de la pantalla y luego iniciar una window.print()

Esta es una solución que probablemente habrá pasado por alto mucha gente y debería considerarse cuando piense que sus usuarios desean un poco más de WYSIWYG. Sin embargo, probablemente debería ser un enlace "compatible con las impresoras" 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");
    });
});

Answer 14

Puede lograr este efecto creando una hoja de estilo css que se dirige directamente a la impresión, y otra orientada directamente a la pantalla.

Usa 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 tu hoja de estilo en tu documento.

Ocultar es fácil, simplemente establece tu estilo de bloque en la hoja de estilo que quieras y no se mostrará. Por ejemplo:

.newStyle1 {
    display: none;
}

Entonces, no se mostrará nada ajustado al estilo de newStyle1 .

Answer 15

Sí, puede aplicar una impresora css. Hay un buen artículo al respecto aquí .