2014-11-28 12:39:53 +0000 2014-11-28 12:39:53 +0000
73
73
Advertisement

¿Cómo conseguir WYSIWYP (imprimir lo que se ve) en un navegador web?

Advertisement

Cuando imprimo una página web desde mi navegador, espero obtener en papel exactamente el contenido que estoy viendo en el navegador. Para ser precisos: Espero que el navegador renderice el mismo contenido de la página de la misma manera, excepto en un lienzo con altura infinita, y que luego decida de manera específica para la impresión cómo distribuir los resultados en las páginas físicas de papel.

Sin embargo, eso no es en absoluto lo que ocurre en muchas páginas web. Pueden imprimir algo completamente diferente. Nunca pedí que los navegadores hicieran esto y no quiero que ocurra.

¿Hay alguna manera de conseguir lo que quiero (que no sea hacer capturas de pantalla, cortarlas y pegarlas minuciosamente e imprimir las imágenes resultantes)? ¿Hay alguna manera de decirle a un navegador web que uso (Firefox, Chrome, Safari, IE u Opera) “imprime esta página como lo haría en una ventana de navegador arbitrariamente alta”?

(PS: ver también: Imprimir desde el navegador usando CSS de pantalla ?)

Advertisement
Advertisement

Respuestas (8)

42
42
42
2017-11-26 06:13:40 +0000

Chrome tiene esta función integrada en las Herramientas de desarrollo, pero en una ubicación poco evidente.

  • Abra las Herramientas de desarrollo (Windows: F12 o Ctrl+Mayús+I, Mac: Cmd+Opt+I)
  • Haga clic en el botón del menú hamburguesa Personalizar y controlar las DevTools y elija Más herramientas >Configuración de renderizado (o Renderizado en las versiones más recientes).
  • Marque la casilla Emular medios de impresión en la pestaña Renderizado y seleccione el tipo de medio Pantalla.

Citado en su mayor parte de esta respuesta . Ver abajo la diferencia.

Ahora cuando imprimas, la impresión será exactamente lo que ves. Asegúrese de mantener las herramientas de desarrollo abiertas hasta que imprima. Una vez que cierre las herramientas de desarrollo, la configuración de Rendering volverá a ser normal.

Nota: La inspiración para esta respuesta vino de https://superuser.com/a/568847/176146 . Pero el texto real de esta respuesta es de lmeurs respuesta . Es casi exactamente lo mismo, pero estamos tratando de hacer exactamente lo contrario de su respuesta, por lo que en lugar de establecer la anulación a Print se establece a Screen.

23
23
23
2014-11-28 12:59:05 +0000

¿Por qué mis páginas web no imprimen lo que veo en mi navegador?

La razón por la que algunas de sus páginas web se imprimen de forma diferente es porque tienen una hoja de estilos de impresión.

  • *

¿Qué es una hoja de estilos de impresión?

Una hoja de estilos de impresión formatea una página web para que, al imprimirla, lo haga automáticamente en un formato fácil de usar. Las hojas de estilo de impresión existen desde hace años y se ha escrito mucho sobre ellas. Sin embargo, muy pocos sitios web las implementan, lo que significa que nos quedamos con páginas web que frustrantemente no se imprimen correctamente en papel.

Es sorprendente que tan pocos sitios web utilicen hojas de estilo de impresión como:

  • Las hojas de estilo de impresión mejoran enormemente la usabilidad, especialmente en páginas con mucho contenido (¡como ésta!)
  • Son fenomenalmente rápidas y fáciles de configurar

Algunos sitios web ofrecen un enlace a una versión de la página para imprimir, pero, por supuesto, hay que configurarlo y mantenerlo. También es necesario que los usuarios vean este enlace en la pantalla y lo utilicen antes que la forma habitual de imprimir las páginas (por ejemplo, seleccionando el botón de impresión en la parte superior de la pantalla). Sin embargo, las versiones para imprimir son útiles cuando se imprimen varias páginas web al mismo tiempo, como un artículo que se extiende por varias páginas web.

Fuente Desactivar las hojas de estilo de impresión (CSS) al imprimir un sitio web

  • *

¿Cómo desactivo una hoja de estilo de impresión?

Hace poco necesité obtener una instantánea de un sitio web exactamente como se muestra en mi pantalla. Es decir, quería el color de fondo, quería los anuncios, quería el diseño completo.

Una opción es hacer capturas de pantalla secuenciales a medida que te desplazas por la página, y luego unirlas en Photoshop. Esto lleva mucho tiempo y deja una imagen de baja resolución (72dpi).

Otra forma de hacer esto es imprimir la página, y luego “guardar como” un PDF en lugar de imprimir. Esto funciona bastante bien para las páginas que no definen un diseño diferente para la impresión de una página frente a la visualización de la misma.

Desafortunadamente para mí, se ha vuelto cada vez más popular incluir una hoja de estilos de “impresión” en un sitio web, que define nuevos estilos de página cuando un usuario intenta imprimir el sitio web. Esto se define en la cabecera y se parece a esto:

Sólo he encontrado una opción que realmente responde a mis necesidades: El complemento/extensión “Web Developer” desarrollado por Chris Pederick.

Con este complemento puedes desactivar muy fácilmente TODOS los estilos, los estilos por defecto, los estilos en línea, los estilos incrustados y, lo has adivinado, ¡los estilos de impresión!

Actualmente está disponible para Firefox y Chrome. Espero de verdad que algún día llegue una extensión para Safari, ya que yo uso principalmente Safari. La única opción que he encontrado para Safari es desactivar TODOS los estilos, una función que viene por defecto con la versión más reciente (5.0.3) del navegador. Esto es útil durante el desarrollo para ver cómo se verá su sitio en un navegador de sólo texto, pero sin la capacidad de seleccionar qué estilos está deshabilitando tiene una utilidad limitada.

Este es un ejemplo de cómo deshabilitar los estilos de impresión con la extensión anterior en Firefox:

Fuente Print stylesheet - the definitive guide

9
Advertisement
9
9
2017-05-09 13:01:26 +0000
Advertisement

Una solución sin plug-in para Firefox: Abre las Herramientas de desarrollo web, en Herramientas de desarrollo por defecto (icono del engranaje) marca “Hacer una captura de pantalla de toda la página”. Sólo tienes que hacer esta parte una vez.

Luego, en Herramientas de desarrollo, haga clic en el icono de la cámara. Toda la página se guardará como un .png. Desde aquí puedes imprimirla, convertirla a pdf, etc.

8
8
8
2014-12-02 07:29:40 +0000

Estoy utilizando la extensión de Chrome: Captura de pantalla de la página web . Con dos clics la página web completa se convierte en jpg o pdf. Ya no es necesario pegar las capturas de pantalla uno mismo. Esta página se ve así:

3
Advertisement
3
3
2016-10-12 11:47:35 +0000
Advertisement

Yo también tenía un problema similar. Actualmente estoy usando Print Friendly and PDF Extenstion for Chrome .

La mejor característica es que puedo eliminar manualmente los elementos que no quiero en mi Print/PDF.

1
1
1
2016-10-27 18:42:56 +0000

(A riesgo de convertir esto en un conjunto de respuestas de Recomendaciones de software , pero hasta ahora, instalar y utilizar la extensión del navegador X parece ser el único tipo de respuesta que realmente funciona:)

Últimamente he estado usando la extensión Open Screenshot de Chrome para este propósito, y estoy muy contento con ella. No ha tenido problemas con una página larga de Quora .

_Actualización (noviembre, 2017): esta ya no es la mejor opción: Firefox y Chrome ahora soportan tomar capturas de pantalla a página completa en sus Herramientas para desarrolladores _.

1
Advertisement
1
1
2019-03-14 12:26:08 +0000
Advertisement

Hoy en día, esto se puede hacer en Firefox (ahora mismo estoy usando la versión 65.0.2) de la siguiente manera:

  1. Pulse F12. Aparecerá el panel de herramientas de desarrollo.
  2. Cerca de la esquina superior derecha, hay un icono de cámara. Para hacer una captura de pantalla de toda la página, pulse sobre él.

En Configuraciones (para acceder a ellas, haz clic en los tres puntos a la derecha del icono de la cámara), puedes personalizar ligeramente su comportamiento; por defecto, guardará la captura de pantalla en tu carpeta de descargas de Firefox.

Si el icono de la cámara no aparece, primero hay que activarlo en Configuración.

1
1
1
2017-06-22 16:06:45 +0000

Aquí hay otra llamada OpenScreenShoot . Me encanta porque es de código abierto, disponible en GitHub, y me funcionó para una página web muy larga en la que, otras alternativas como WebpageScreenShot fallaron.

Advertisement

Preguntas relacionadas

9
21
13
7
3
Advertisement