Como obter o WYSIWYP (imprimir o que você vê) em um navegador da web?

Quando imprimo uma página da Web no meu navegador, espero entrar no papel exatamente o conteúdo que estou vendo no navegador. Para ser mais preciso: espero que o navegador renderize o mesmo conteúdo da página da mesma maneira, exceto em uma tela com altura infinita, e depois decida, de maneira específica da impressão, como distribuir os resultados pelas páginas físicas de papel.

No entanto, isso não é o que está acontecendo em muitos sites. Eles podem imprimir algo completamente diferente. Nunca pedi navegadores para fazer isso e não quero que isso aconteça.

Existe uma maneira de obter o que eu quero (além de tirar capturas de tela, cortá-las e colá-las cuidadosamente e imprimir as imagens resultantes)? Existe uma maneira de informar um navegador da Web que eu uso (Firefox, Chrome, Safari, IE ou Opera): "imprima esta página como você a renderizaria em uma janela arbitrariamente alta do navegador"?

(PS: veja também: Imprimir no navegador usando CSS na tela ?)

O Chrome possui esse recurso incorporado nas Ferramentas do desenvolvedor, mas em um local não muito óbvio.

• Abra as Ferramentas do desenvolvedor (Windows: F12ou Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Clique no botão Personalizar e controlar o hambúrguer do DevTools e escolha Mais ferramentas> Configurações de renderização (ou Renderização em versões mais recentes).
• Marque a caixa de seleção Emular mídia de impressão na guia Renderização e selecione o tipo de mídia Tela .

Citado principalmente nesta resposta . Veja abaixo a diferença.

Agora, quando você imprimir, a impressão será exatamente o que você vê. Mantenha as ferramentas do desenvolvedor abertas até imprimir. Depois de fechar as ferramentas do desenvolvedor, a configuração Renderização será redefinida para o normal.

Nota: A inspiração para esta resposta veio de https://superuser.com/a/568847/176146 . Mas o próprio texto desta resposta é de lmeurs ' resposta . É quase exatamente o mesmo, mas estamos tentando fazer exatamente o oposto de sua resposta; portanto, em vez de definir a substituição como Imprimir, ela é definida como Tela .

Por que minhas páginas da web não imprimem o que vejo no meu navegador?

O motivo pelo qual algumas páginas da web estão imprimindo de maneira diferente é porque elas possuem uma folha de estilo de impressão .

O que é uma folha de estilo de impressão?

Uma folha de estilo de impressão formata uma página da Web para que, quando impressa, imprima automaticamente em um formato fácil de usar. As folhas de estilo de impressão existem há vários anos e foram escritas sobre muitas coisas. No entanto, poucos sites os implementam, o que significa que ficamos com páginas da web que frustrantemente não são impressas corretamente no papel.

É notável que tão poucos sites usem folhas de estilo de impressão como:

• As folhas de estilo de impressão melhoram enormemente a usabilidade, especialmente para páginas com muito conteúdo (como este!)
• Eles são fenomenalmente rápidos e fáceis de configurar

Alguns sites oferecem um link para uma versão da página para impressão, mas é claro que isso precisa ser configurado e mantido. Também requer que os usuários observem esse link na tela e, em seguida, o usem com antecedência da maneira como imprimem páginas (por exemplo, selecionando o botão Imprimir na parte superior da tela). As versões para impressão são úteis no entanto, ao imprimir várias páginas da web ao mesmo tempo, como um artigo que se estende para várias páginas da web.

Desativar origem Imprimir folhas de estilo (CSS) ao imprimir um site

Como desativar uma folha de estilo de impressão?

Recentemente, precisei obter um instantâneo de um site exatamente como é mostrado na minha tela. Ou seja, eu queria a cor de fundo, queria os anúncios, queria o layout completo.

Uma opção é tirar capturas de tela sequenciais enquanto você rola pela página e depois juntá-las novamente no Photoshop. Isso consome tempo e deixa uma imagem de baixa resolução (72 dpi).

Outra maneira de fazer isso é imprimir a página e "salvar como" um PDF em vez de realmente imprimir. Isso funciona muito bem para páginas que não definem um layout diferente para imprimir uma página e exibi-la.

Infelizmente para mim, tornou-se cada vez mais popular incluir uma folha de estilo "imprimir" em um site, que define novos estilos de página quando um usuário tenta imprimir o site. Isso é definido no cabeçalho e se parece com isso:

Encontrei apenas uma opção que realmente atende às minhas necessidades: o complemento / extensão "Web Developer" desenvolvido por Chris Pederick.

Com este plugin, você pode facilmente desabilitar TODOS os estilos, estilos padrão, estilos embutidos, estilos incorporados e, você adivinhou, estilos de impressão!

Atualmente, está disponível para Firefox e Chrome. Eu realmente espero que uma extensão do Safari chegue um dia, pois eu uso principalmente o Safari. A única opção que encontrei para o Safari é desativar TODOS os estilos - um recurso que vem por padrão com a versão mais recente (5.0.3) do navegador. Isso é útil durante o desenvolvimento para ver como o site será exibido em um navegador somente de texto, mas sem a capacidade de selecionar quais estilos você está desativando, possui utilidade limitada.

Aqui está um exemplo de desativar os estilos de impressão com a extensão acima no Firefox:

Folha de estilo de impressão de origem - o guia definitivo

Uma solução sem plug-in para o Firefox: Abra as Ferramentas do desenvolvedor da Web, em Ferramentas padrão do desenvolvedor (ícone de engrenagem), marque "Tire uma captura de tela da página inteira". Você só precisa fazer esta parte uma vez.

Em Ferramentas do desenvolvedor, clique no ícone da câmera. A página inteira será salva como um arquivo .png. A partir daqui, você pode imprimi-lo, converter em pdf, etc.

Estou usando a extensão do Chrome: captura de tela da página da Web . Com dois cliques, a página completa é convertida em jpg ou pdf. Não é mais necessário colar as capturas de tela. Esta página tem esta aparência:

Eu também estava enfrentando o mesmo problema. Atualmente, estou usando a versão amigável para impressão e a extensão de PDF para o Chrome .

A melhor característica é que posso excluir manualmente os itens que não desejo no meu Print / PDF.

Aqui está outro chamado OpenScreenShoot . Adoro porque é de código aberto, disponível no GitHub, e funcionou para mim por uma página muito longa na qual outras alternativas como o WebpageScreenShot falharam.

(Correndo o risco de transformar isso em um conjunto de respostas das Recomendações de Software , mas até agora, instale e use a extensão do navegador X parece ser o único tipo de resposta que realmente funciona :)

Ultimamente, tenho usado a extensão Open Screenshot Chrome para esse fim e estou muito feliz com isso. Não teve problemas com uma página longa do Quora .

Atualização (novembro de 2017): essa não é mais a melhor opção: o Firefox e o Chrome agora oferecem suporte a capturas de tela de página inteira em suas Ferramentas de desenvolvedor .

Hoje, isso pode ser feito no Firefox (estou usando o 65.0.2 agora) da seguinte maneira:

1. Pressione F12. O painel Ferramentas do desenvolvedor será exibido.
2. Perto do canto superior direito, há um ícone de câmera. Para tirar uma captura de tela da página inteira, clique nela.

Em Configurações (para acessá-los, clique nos três pontos à direita do ícone da câmera), você pode personalizar um pouco seu comportamento; Por padrão, ele salvará a captura de tela na sua pasta de downloads do Firefox.

Se o ícone da câmera estiver faltando, primeiro você deve habilitá-lo em Configurações .