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

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.

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.

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);

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/

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.

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.

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.

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

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".

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);

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

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

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 :-)