¿Cómo imprimo con la hoja de estilo de pantalla?

50

Varios sitios web que utilizo tienen hojas de estilo realmente malas para los medios impresos, pero sus hojas de estilo de pantalla son bastante buenas.

¿Hay alguna forma de decirle a mi navegador que ignore la hoja de estilo de impresión y solo imprima con la hoja de estilo de la pantalla?

También me gustaría hacer esto cuando quiero mostrar a los clientes la diferencia entre los dos.

vy32
fuente
Si los sitios web en cuestión son de terceros, tal vez podría probar las Herramientas para desarrolladores de Chrome (Ctrl + Shift + I), luego haga clic derecho en nodo / elemento (la hoja de estilo de impresión en este caso) y seleccione Delete This Node.
DavChana
Es un duplicado!
vy32
No es una respuesta directa a su pregunta, pero si está en Firefox, simplemente le molesta que todos los enlaces estén adjuntos con sus URL completas en la vista previa de impresión (quien lo considere una gran idea necesita die (http://www.have-an-agonizingly-slow-and-painful-death!!!.com)) simplemente abra Inspect Element (Dev Tools ) , vaya al Editor de estilos , use la práctica lista de reglas @media en el lado derecho para encontrar la hoja de printestilos con estilos y luego elimine todas las printreglas aplicadas a[href]. Luego inicie la Vista previa de impresión nuevamente.
ADTC

Respuestas:

24

Usar las Herramientas para desarrolladores de Chrome ( Ctrl+ Shift+ I) es lo único que he encontrado que funciona.

  1. Busque todas las instancias media="screen"y elimine ese atributo.
  2. Luego busque media="print"y elimine todo ese enlace.
  3. Entonces intente imprimir.

Esto generalmente me da la página con estilo de pantalla.

Si realmente solo desea deshabilitar los estilos de impresión, puede instalar la extensión Web Developer (creo que hay una versión para Firefox y Chrome). Tiene un botón para deshabilitar los estilos de impresión. Sin embargo, no extiende el estilo de "pantalla" para imprimir, por lo que la mayoría de las veces no funciona de la manera que espera.

James
fuente
1
Gracias. Esa es una gran solución. Deprimente, pero genial. El sitio web principal con el que tengo problemas es Wired, que por alguna razón imprime horriblemente pero se ve muy bien en la pantalla.
vy32
Necesito un complemento que haga esto.
vy32
3
@ vy32 eso no es una mala idea en absoluto. Llevaba un tiempo queriendo jugar con las extensiones de Chrome. Durante las vacaciones finalmente tuve un par de horas. Así que aquí está PrintScreen, un pequeño botón en el que hace clic cuando una página tiene selectores de medios css personalizados de impresión / pantalla. enlace
James
¿El botón PrintScreen no funciona tan bien?
vy32
1
Sospecho que este es un problema de experiencia del usuario. Normalmente pongo más énfasis en la experiencia del usuario, pero esta vez solo estaba jugando con nuevas técnicas y sistemas, y no pude prestar atención. Después de hacer clic en el botón PS, debe hacer clic en imprimir de la manera normal. Tiene razón, tendría más sentido si la extensión llamara directamente a la impresión. Si tengo tiempo esta semana, intentaré actualizar la extensión para ir directamente a la pantalla de impresión como realmente debería. Gracias
James
17

Siguiendo la idea de James pero usando jQuery:

$('*[media="screen"],*[media="print"]').attr('media', '')

Si la página no tiene jQuery, inyecte:

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);
Leo Gallucci
fuente
11

Hay un nuevo método para elegir directamente la emulación de medios en Herramientas para desarrolladores, consulte https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

Kitchin
fuente
1
Esto funciona. Siga las instrucciones y seleccione el tipo de medio "pantalla". Luego, cuando imprima, usará "pantalla"
Carl G
A medida que el software evoluciona, también debería apilar las respuestas de intercambio; esta debería ser la respuesta seleccionada.
Michaël
6

Encontré una manera fácil de hacerlo en Chrome .

Abra Developer Tool> Representación> Seleccione 'pantalla' en Emular medios CSS.

Ahora intenta imprimir. Escogerá la pantalla CSS en lugar de Imprimir CSS.

dj rock
fuente
cual navegador web?
vy32
En el navegador Chrome
dj rock
¡Esto funciona y es la solución más rápida!
Laurent
Más específicamente en el Chrome actual: herramientas de desarrollador abiertas. Menú superior derecho de 3 puntos> Más herramientas> Renderizado. Desplácese hacia abajo para Emular CSS Media.
Laurent
5

Leo tuvo una buena idea allí, pero no hace lo que James dijo : debería ser

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

Sugerencia: guarde lo siguiente como marcador para facilitar su uso:

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

Esto precarga jQuery y espera 2 segundos para que termine, pero si esta espera no es suficiente, simplemente ejecútelo, jQuery debería haberse cargado mientras tanto.

Bastian Blankenburg
fuente
4
  1. Haz lo que James dijo ;)

    Puede verificar la salida abriendo la configuración de las Herramientas para desarrolladores de Chrome (esquina inferior derecha) y seleccionar en "Invalidar" la opción "Emular impresión de medios CSS" -vista. Al alternar esta opción, puede comparar la impresión y la vista de pantalla. ¡Que te diviertas!

  2. Instale este complemento: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

Ahora también se imprimen imágenes de fondo y colores.

Error: no funciona con sprites CSS.

EDITAR: Chrome ha cambiado la vista de impresión en 2014, creo, por lo que ya no necesita usar el complemento vinculado.

mgutt
fuente
Usar las Herramientas para desarrolladores de Chrome para configurar "Emular medios CSS" en "pantalla" es la única respuesta que funciona.
Benjamin
3

Me encontré con este problema con un sitio web que tenía un solo archivo CSS usando @media printy @media screen, por lo que la solución para deshabilitar el archivo CSS de impresión por separado no funcionó para mí. Si bien ciertamente podría editar el CSS y comentar el bloque de impresión mientras visualizo la página, esos cambios no se transfirieron a la vista previa de impresión.

La solución que encontré fue la extensión Print Edit para Firefox y Chrome . Le permite editar la página inmediatamente antes de imprimir e incluye un botón simple para usar el estilo web ( @media screen) para la página.

Tuve que cambiar ligeramente la escala en la que estaba imprimiendo, ya que la superficie de impresión es aproximadamente una proporción de 17:22, mientras que mi navegador tiene aproximadamente 16: 9, por lo que algunas de las cosas en la página se estaban llenando un poco horizontalmente. También tuve que habilitar la impresión de colores e imágenes de fondo por separado

Brian S
fuente
Esto funcionó perfectamente para mí. Ya había pasado 10 minutos cambiando el texto de un sitio a púrpura ya que mi impresora se había quedado sin tinta. Con esta solución, podría instalar la extensión, presionar el botón de estilo web y wallah funcionó :)
Chris Nevill
1

A veces, los sitios web usan CSS para especificar que se deben usar diferentes estilos en la pantalla y al imprimir. Esto a menudo es bueno, pero también puede ser confuso y problemático. Inspeccione el código fuente de la página y busque algo como:

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

Una razón por la que este problema es común es que los sitios web que usan el popular marco Bootstrap usan el ubicuo archivo bootstrap.min.css , que contiene el estilo CSS anterior.

La clave para buscar es @media print. Los sitios web a menudo tienen estructuras complejas y puede ayudar guardar la página localmente e inspeccionarla con una herramienta de búsqueda de texto recursiva.

Cuando creas que has encontrado el lugar en el código CSS, puedes modificar la página directamente en tu navegador utilizando sus funciones de desarrollador. (En Chrome, presiona Ctrl+ Shift+ Ipara iniciarlos).

Busque el código CSS y simplemente elimine o invalide las filas que causan el problema. Verifique que la operación funcionó utilizando "Vista previa de impresión".

Gruber
fuente
0

Instale el complemento Greasemonkey y use el script que se proporciona a continuación.

Modifiqué un script que encontré aquí http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

Cambié "pantalla" a "imprimir" al final (no tengo idea sobre jQuery, así que no me haga ninguna pregunta) para que, de hecho, envíe la versión de la pantalla a la impresora. Al imprimir en pdf, (usando impresoras Foxit o Nitro Pdf), configuro el tipo de página en Tabloid Extra en modo horizontal para que el tamaño del pdf coincida más o menos con el tamaño de la pantalla. ¡Disfrutar! Recuerde, no sé nada sobre programación, por lo que el crédito va al autor original.

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);
xs400
fuente
-1

Intente habilitar la "Print background (colors & images)"opción Page Setupy verifique cómo se ve Print Preview(Es para FF).

romano
fuente
1
No tiene el resultado deseado. Lo siento.
vy32
-1

Similar a James: use la pestaña "Fuentes" en las herramientas para desarrolladores de Chrome y reemplace todas las instancias de media printcon media speech. Por lo tanto, todos los cambios de CSS para ocultar las barras de navegación, etc., no se aplicarán al imprimir (pero se aplicarán cuando se use texto a voz)

Esto se puede hacer con JQuery como arriba.

Esto es útil ya que estoy usando el CDN de css para que la personalización esté lista

usted cad señor - tome eso
fuente
-2

Hay una gran herramienta para eso en Mac.

Instale Paparazzi => copiar URL a Paparazzi => Guardar imagen como => PDF

(en exportaciones de PDF, incluso el texto no se puede seleccionar, no es solo una "imagen")

https://derailer.org/paparazzi/screenshots

disfruta :-)

Michael Kaufmann
fuente
Desafortunadamente, este programa imprime un mapa de bits, lo que significa que las fuentes están rasterizadas. No es lo que quiero.
vy32