Como imprimo com a folha de estilo da tela?

50

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.

vy32
fonte
Se os sites em questão forem de terceiros, talvez você possa experimentar as Ferramentas do desenvolvedor do Chrome (Ctrl + Shift + I), clique com o botão direito do mouse no nó / elemento (a folha de estilo de impressão, neste caso) e selecione Delete This Node.
DavChana
É uma duplicata!
vy32
Não é uma resposta direta à sua pergunta, mas se no Firefox, você está apenas irritado com o fato de todos os links estarem anexados com seus URLs completos na visualização impressa (quem pensou que essa é uma ótima idéia precisa die (http://www.have-an-agonizingly-slow-and-painful-death!!!.com)) basta abrir o Inspect Element (Dev Tools ) , vá para o Editor de estilos , use a lista útil de regras @media no lado direito para encontrar a folha de printestilos com estilos e remova todas as printregras aplicadas a[href]. Em seguida, inicie a visualização de impressão novamente.
ADTC

Respostas:

24

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.

James
fonte
1
Obrigado. Essa é uma ótima solução. Deprimente, mas ótimo. O site principal com o qual estou tendo problemas é o Wired, que por algum motivo imprime horrivelmente, mas fica ótimo na tela.
vy32
Eu preciso de um plugin que faça isso.
vy32
3
@ vy32 que não é uma má idéia. Eu estava querendo jogar com extensões do Chrome há um tempo. Durante as férias, finalmente tive algumas horas. Então, aqui está o PrintScreen, um pequeno botão no qual você clica quando uma página possui seletores de mídia CSS / impressão personalizados. ligação
James
o botão PrintScreen não funciona tão bem ???
vy32
1
Suspeito que este seja um problema de experiência do usuário. Normalmente, concentrei mais a experiência do usuário, mas desta vez estava apenas brincando com novas técnicas e sistemas, e não prestava atenção. Depois de clicar no botão PS, você precisa clicar em imprimir da maneira normal. Você está certo, faria mais sentido se eu ligasse diretamente para a extensão. Se tiver tempo nesta semana, tentarei atualizar a extensão para ir direto para a tela de impressão, como realmente deveria. Obrigado
James
17

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);
Leo Gallucci
fonte
6

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.

dj rock
fonte
qual navegador da web?
vy32
No Navegador Chrome
DJ balançar
Isso funciona e é a solução mais rápida!
Laurent
Mais especificamente nas ferramentas atuais do desenvolvedor Chrome: Open. Menu de três pontos no canto superior direito> Mais ferramentas> Renderização. Role para baixo para Emular CSS Media.
Laurent
5

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.

Bastian Blankenburg
fonte
4
  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.

mgutt
fonte
Usar as Ferramentas do desenvolvedor do Chrome para definir "Emular mídia CSS" para "tela" é a única resposta que funciona.
Benjamin
3

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

Brian S
fonte
Isso funcionou perfeitamente para mim. Eu já havia passado 10 minutos mudando o texto de um site para roxo, pois minha impressora ficou sem tinta. Usando esta solução, eu poderia instalar a extensão, pressionar o botão estilo web e o wallah funcionou :)
Chris Nevill
1

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

Gruber
fonte
0

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);
xs400
fonte
-1

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

romano
fonte
1
Não possui o resultado desejado. Desculpa.
vy32
-1

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

seu cad senhor - leve isso
fonte
-2

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

Michael Kaufmann
fonte
Infelizmente, este programa imprime um bitmap, o que significa que as fontes são rasterizadas. Não é o que eu quero.
vy32