Como imprimo com a folha de estilo da tela?

40

Vários sites que eu uso têm folhas de estilo realmente ruins para a mídia impressa, mas suas folhas de estilo de 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 quiser mostrar aos clientes a diferença entre os dois.

    
por vy32 02.08.2012 / 13:35

12 respostas

20

O uso das Ferramentas de Desenvolvedor do Chrome ( Ctrl + Shift + I ) é a única coisa que descobri que funciona.

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

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

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

    
por 22.09.2012 / 15:32
15

Seguindo a idéia do James , mas usando jQuery:

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

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

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

Existe um novo método para escolher diretamente a emulação de mídia nas Ferramentas do desenvolvedor, consulte link

    
por 02.06.2015 / 15:05
4

Leo tinha uma boa ideia lá, mas não faz bem 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 seja concluído, mas se essa espera não for suficiente, basta executá-lo novamente. O jQuery deveria ter sido carregado nesse meio tempo.

    
por 11.04.2016 / 19:19
4
  1. Faça qualquer coisa James disse ;)

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

  2. Instale este complemento: link

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

Bug: não funciona com sprites CSS.

EDIT: o Chrome alterou a visualização de impressão em 2014, portanto, você não precisa mais usar o complemento vinculado.

    
por 20.03.2013 / 13:20
1

Eu acabei de encontrar esse problema com um site que tinha um único arquivo CSS usando @media print e @media screen , então a solução para desabilitar o arquivo CSS de impressão separado não funcionou para mim. Embora eu certamente possa editar o CSS e comentar o bloco de impressão enquanto visualizo a página, essas alterações não foram transferidas para a visualização da 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 simples botão para usar o estilo da Web ( @media screen ) para a página.

Eu tive que alterar ligeiramente a escala que estava imprimindo, já que a superfície de impressão é de aproximadamente 17:22, enquanto o meu navegador é aproximadamente 16: 9, então algumas das coisas na página estavam ficando lotadas na horizontal . Eu também tive que ativar a impressão das cores de fundo & imagens separadamente

    
por 26.07.2016 / 00:12
1

Às vezes, os sites da web usam CSS para especificar que estilos diferentes devem ser usados em tela e ao imprimir. Isso geralmente é bom, mas também pode ser confuso e problemático. Inspecione o código-fonte da página e procure por algo como:

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

Um dos motivos pelos quais esse problema é comum é que os sites que usam o popular framework Bootstrap usam o ubíquo arquivo bootstrap.min.css , que contém o estilo CSS acima.

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

Quando você acha que encontrou o ponto no código CSS, é possível modificar a página diretamente no navegador usando os recursos do desenvolvedor. (No Chrome, você pressiona Ctrl + Desloca + I para iniciá-los.)

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

    
por 20.01.2018 / 13:39
0

Instale o complemento Greasemonkey e use o script abaixo.

Eu modifiquei um script que encontrei aqui link

Mudei "screen" para "print" no final (não tenho idéia sobre o jQuery, então não me faça nenhuma pergunta) para que, na verdade, ele envie a versão da tela para a impressora. Ao imprimir em pdf, (usando impressoras Foxit ou Nitro Pdf), eu configuro o tipo de página para o Tablóide Extra no modo paisagem para que o tamanho do pdf corresponda ao tamanho da tela mais ou menos. Apreciar! Lembre-se, eu não sei nada sobre programação, então o crédito vai para o 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);
    
por 29.04.2016 / 04:45
0

Eu encontrei uma maneira fácil de fazer isso no Chrome .

Open Developer Tool > Rendering > Select 'screen' in Emulate CSS media.

Agora tente imprimir. Ele irá escolher a tela CSS em vez de imprimir CSS.

    
por 03.06.2018 / 17:44
-1

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

    
por 06.08.2012 / 20:56
-1

Semelhante a James - use a guia "Origens" nas ferramentas do Chrome Developer e substitua todas as instâncias de media print por media speech . Assim, todas as alterações do css para ocultar as navbars, etc., não serão aplicadas durante a impressão (mas serão aplicadas quando for utilizado o texto para voz)

Isso pode ser feito com o JQuery como acima.

Isso é útil, pois estou usando o CDN do css para que a customização saia.

    
por 04.10.2016 / 19:00
-2

Existe uma ótima ferramenta para isso no Mac.

Instale Paparazzi = > copiar URL para paparazzi = > Salvar imagem como = > PDF

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

link

aproveite: -)

    
por 30.06.2017 / 11:49