Como imprimo com a folha de estilo da tela?

Vários sites que eu uso têm folhas de estilo muito ruins para a mídia impressa, mas as folhas de estilo da tela são muito boas.

Existe alguma maneira de dizer ao meu navegador para ignorar a folha de estilo de impressão e apenas imprimir com a folha de estilo da tela?

Eu também gostaria de fazer isso quando quero mostrar aos clientes a diferença entre os dois.

Usar as Ferramentas do desenvolvedor do Chrome ( Ctrl+ Shift+ I) é a única coisa que achei que funciona.

1. Pesquise todas as instâncias media="screen"e exclua esse atributo.
2. Em seguida, procure media="print"e exclua todo o link.
3. Em seguida, tente imprimir.

Isso geralmente me dá a página com o estilo da tela.

Se você realmente deseja apenas desabilitar os estilos de impressão, pode instalar a extensão Web Developer (acho que há uma versão para Firefox e Chrome). Possui um botão para desativar os estilos de impressão. No entanto, ele não estende o estilo "tela" para impressão; portanto, na maioria das vezes, não funciona da maneira que você espera.

Seguindo a idéia de James, mas usando o jQuery:

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

Se a página não tiver jQuery, injete-o:

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

Há um novo método para escolher diretamente a emulação de mídia nas Ferramentas do desenvolvedor, consulte https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

Encontrei uma maneira fácil de fazer isso no Chrome .

Abra a Ferramenta de desenvolvedor> Renderização> Selecione 'tela' em Emular mídia CSS.

Agora tente imprimir. Ele selecionará a tela CSS em vez de Imprimir CSS.

Leo teve uma boa ideia lá, mas isso não faz exatamente o que James disse : deveria ser

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

Dica: salve o seguinte como um bookmarklet para facilitar o 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)

Isso pré-carrega o jQuery e aguarda 2 segundos para que ele termine, mas se essa espera não for suficiente, execute-a novamente, o jQuery deveria ter sido carregado nesse meio tempo.

1. Faça o que James disse ;)

   Você pode verificar a saída abrindo as configurações das Ferramentas do desenvolvedor do Chrome (canto inferior direito) e selecionar em "Substituir" a opção "Emular impressão em mídia CSS". Ao alternar essa opção, você pode comparar a impressão e a visualização da tela. Diverta-se!

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

Agora, imagens de fundo e cores também são impressas.

Bug: Não funciona com sprites CSS.

EDIT: O Chrome mudou a visualização de impressão em 2014, acho que você não precisa mais usar o complemento vinculado.

Acabei de encontrar esse problema com um site que tinha um único arquivo CSS usando @media printe @media screen, portanto, a solução para desativar o arquivo CSS de impressão separado não funcionou para mim. Embora eu certamente pudesse editar o CSS e comentar o bloco de impressão enquanto visualizava a página, essas alterações não foram transferidas para a visualização de impressão.

A solução que encontrei foi a extensão Print Edit para Firefox e Chrome . Ele permite editar a página imediatamente antes da impressão e inclui um botão simples para usar o estilo da Web ( @media screen) na página.

Eu tive que mudar um pouco a escala em que estava imprimindo, já que a superfície de impressão tem uma proporção de aproximadamente 17:22 enquanto o meu navegador tem aproximadamente 16: 9, então algumas das coisas na página estavam ficando um pouco abarrotadas horizontalmente. Também precisei imprimir as cores e imagens de fundo separadamente

Às vezes, os sites usam CSS para especificar que estilos diferentes devem ser usados ​​na tela e durante a impressão. Isso geralmente é bom, mas também pode ser confuso e problemático. Inspecione o código fonte da página e procure algo como:

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

Uma razão pela qual esse problema é comum é que os sites que usam a estrutura popular do Bootstrap usam o arquivo onipresente bootstrap.min.css , que contém o estilo CSS acima.

A principal coisa a procurar é @media print. Os sites geralmente têm estruturas complexas e pode ajudar a salvar a página localmente e inspecioná-la com uma ferramenta de pesquisa de texto recursiva.

Quando você acha que encontrou o local no código CSS, pode modificar a página diretamente no seu navegador usando seus recursos de desenvolvedor. (No Chrome, você pressiona Ctrl+ Shift+ Ipara iniciá-los.)

Procure o código CSS e apenas remova ou invalide as linhas que causam o problema. Verifique se a operação funcionou usando "Visualizar impressão".

Instale o complemento Greasemonkey e use o script fornecido abaixo.

Modifiquei um script que encontrei aqui http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

Alterei "tela" para "imprimir" no final (não tenho idéia do jQuery, portanto, não me faça perguntas) para que, na verdade, ele envie a versão da tela para a impressora. Ao imprimir em pdf (usando as impressoras Foxit ou Nitro Pdf), defino o tipo de página como Tablóide Extra no modo paisagem para que o tamanho do pdf corresponda mais ou menos ao tamanho da tela. Desfrutar! Lembre-se, eu não sei nada sobre programação, então o crédito é do 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);

Tente ativar a "Print background (colors & images)"opção Page Setupe verifique como ela aparece Print Preview(é para FF).

Semelhante ao James - use a guia "Fontes" nas ferramentas do desenvolvedor do Chrome e substitua todas as instâncias media printpor media speech. Assim, todas as alterações de CSS para ocultar as barras de navegação etc. não serão aplicadas durante a impressão (mas serão aplicadas quando o texto para fala for usado)

Isso pode ser possível com o JQuery como acima.

Isso é útil, pois estou usando o CDN do css, para que a personalização seja correta

Existe uma ótima ferramenta para isso no Mac.

Instalar Paparazzi => copiar URL para Paparazzi => Salvar imagem como => PDF

(nas exportações de PDF, mesmo o texto não é selecionável, não é apenas uma "imagem")

https://derailer.org/paparazzi/screenshots

desfrutar :-)