¿Cómo obtener WYSIWYP (imprime lo que ves) en un navegador web?

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 muestre el mismo contenido de la página de la misma manera, excepto en un lienzo con altura infinita, y luego decida de manera específica de impresión cómo distribuir los resultados en páginas físicas de papel.

Sin embargo, eso no es lo que está sucediendo en muchos sitios web. Pueden imprimir algo completamente diferente. Nunca pedí navegadores para hacer esto y no quiero que suceda.

¿Hay alguna manera de obtener lo que quiero (aparte de tomar 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): "imprima esta página como la representaría en una ventana de navegador arbitrariamente alta"?

(PD: ver también: ¿ Imprimir desde el navegador usando Screen CSS ?)

Chrome tiene esta característica integrada en las Herramientas para desarrolladores, pero en una ubicación muy poco obvia.

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

Citado principalmente de esta respuesta . Vea a continuación la diferencia.

Ahora, cuando imprima, la impresión será exactamente lo que ve. Asegúrese de mantener abiertas las herramientas de desarrollador hasta que imprima. Una vez que cierre las herramientas del desarrollador, la configuración de Representación se restablecerá a la normalidad.

Nota: la inspiración para esta respuesta provino de https://superuser.com/a/568847/176146 . Sin embargo, el propio texto 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 en Imprimir , se establece en Pantalla .

¿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 imprimen de manera diferente es porque tienen una hoja de estilo de impresión .

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

Una hoja de estilo de impresión formatea una página web para que, cuando se imprima, se imprima automáticamente en un formato fácil de usar. Las hojas de estilo de impresión han existido durante varios años y se han escrito sobre mucho. Sin embargo, muy pocos sitios web los implementan, lo que significa que nos quedan páginas web que frustrantemente no se imprimen correctamente en papel.

Es notable 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 para páginas con mucho contenido (¡como esta!)
• Son fenomenalmente rápidos y fáciles de configurar

Algunos sitios web ofrecen un enlace a una versión impresa de la página, pero esto, por supuesto, debe configurarse y mantenerse. También requiere que los usuarios noten este enlace en la pantalla y luego lo usen antes de la forma habitual en que imprimen 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 a varias páginas web.

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

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

Recientemente necesitaba 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 tomar capturas de pantalla secuenciales a medida que se desplaza hacia abajo por la página, luego juntarlas nuevamente en Photoshop. Esto lleva mucho tiempo y te deja con una imagen de baja resolución (72 ppp).

Otra forma de hacerlo es imprimir la página, luego "guardar como" un PDF en lugar de imprimirlo. Esto funciona bastante bien para páginas que no definen un diseño diferente para imprimir una página en lugar de verla.

Desafortunadamente para mí, se ha vuelto cada vez más popular incluir una hoja de estilo "imprimir" en un sitio web, que define nuevos estilos de página cuando un usuario intenta imprimir el sitio web. Esto se define en el encabezado y se ve así:

Solo he encontrado una opción que realmente satisface mis necesidades: el complemento / extensión "Desarrollador web" desarrollado por Chris Pederick.

Con este complemento, puede deshabilitar muy fácilmente TODOS los estilos, estilos predeterminados, estilos en línea, estilos incrustados y, lo adivinó, ¡imprimir estilos!

Actualmente está disponible para Firefox y Chrome. Realmente espero que algún día llegue una extensión de Safari, ya que principalmente uso Safari. La única opción que he encontrado para Safari es deshabilitar 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 solo texto, pero sin la capacidad de seleccionar qué estilos está deshabilitando, tiene una utilidad limitada.

Aquí hay un ejemplo de cómo deshabilitar los estilos de impresión con la extensión anterior en Firefox:

Hoja de estilo de impresión de origen : la guía definitiva

Una solución sin complemento para Firefox: Abra las Herramientas para desarrolladores web, en Herramientas para desarrolladores predeterminadas (icono de engranaje) marque "Tomar una captura de pantalla de toda la página". Solo necesitas hacer esta parte una vez.

Luego, en Herramientas para desarrolladores, haga clic en el icono de la cámara. Toda la página se guardará como .png. Desde aquí puede imprimirlo, convertirlo a pdf, etc.

Estoy usando la extensión de Chrome: captura de pantalla de la página web . Con dos clics, la página web completa se convierte a jpg o pdf. Ya no es necesario pegar las capturas de pantalla. Esta página se ve así:

También estaba enfrentando un problema similar. Actualmente estoy usando Print Friendly y PDF Extenstion para Chrome .

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

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

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

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

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

Hoy, esto se puede hacer en Firefox (estoy usando 65.0.2 en este momento) de la siguiente manera:

1. Presione F12. Aparecerá el panel de Herramientas para desarrolladores.
2. Cerca de la esquina superior derecha, hay un icono de cámara. Para tomar una captura de pantalla de toda la página, haga clic en ella.

En Configuración (para acceder a ellos, haga clic en los tres puntos a la derecha del icono de la cámara), puede personalizar ligeramente su comportamiento; de forma predeterminada, guardará la captura de pantalla en su carpeta de descargas de Firefox.

Si falta el icono de la cámara, primero debe habilitarlo en Configuración .