Existem duas maneiras de criar uma página imprimível:
1. Use especialmente um script separado para exibir uma página sem menus e design desnecessário.
2. Exibir a mesma página que visualizamos ao visualizar o site, mas com diferentes estilos suportados, onde elementos desnecessários ficam ocultos.
Tive a oportunidade de criar documentos (faturas, faturas, etc.) para impressão. Então optei pela primeira opção. Mas isso é simples no meu caso. A segunda opção parece-me mais flexível.
Aqui está minha experiência, notas:
1. A regra principal é ser mais simples e as pessoas serão atraídas até você aqui. 🙂 Resumindo, não use uma variedade de designs. Basta uma pessoa ler o texto impresso, não há necessidade de sobrecarregá-lo com designs desnecessários. Sim, e desperdício de tinta na impressora.
2. Não usamos imagens de fundo; elas não estarão presentes durante a impressão. Ou irão, mas não em todos os navegadores. Pelo menos algum ancinho semelhante aconteceu comigo.
3. Tentamos usar fundo branco e texto preto. Se for o contrário, você desperdiçará muita tinta. Não acho que haja necessidade de fazer texto colorido – muitas pessoas têm uma impressora em preto e branco de qualquer maneira.
4. Caso precise que o conteúdo a seguir seja impresso na próxima página, insira um bloco div com a classe pagebreak antes deste texto. Descrevemos a classe em estilos:
Quebra de página (quebra de página depois: sempre;)
Quebra de página ( quebra de página depois: sempre; |
o texto por trás deste bloco será impresso em uma nova página. Funciona em todos os navegadores modernos. E também não os modernos. Um IE até a versão 7 inclusive falha. Mas você tem que marcar nele!
5. E então, imprima. O próprio usuário pode escolher a impressão. Você pode apostar
janela.onload = função () ( janela.print(); )
e o próprio botão:
< button onclick = "window.print();" >Selo< / button > |
Este botão aparecerá ao visualizar a página, mas não será impresso, pois definimos display: none; in style for media="print", ou seja, em estilos para o dispositivo de impressão. Ao clicar no botão, uma janela de impressão aparecerá.
Para quem quer superautomatizar o processo de impressão, para que, por exemplo, abramos uma página e a impressora comece imediatamente a imprimir a página - acalme o seu ardor ou aquele que lhe pede para fazer isso. Não encontrei esse método. Sim, ele não existe. Porque é lógico. Imagine que você acessa um site e ele está programado em javascript para imprimir cem cópias de páginas. E a impressora enlouquece e começa a imprimir esse monte de páginas sem o seu conhecimento. Ilógico? Ilógico!
Certa vez, um gerente de projeto me pediu sinceramente para fazer uma coisa dessas. Tive que explicar tudo isso para ele, dar exemplos para que ele entendesse que isso não pode ser feito e não é necessário.
6. Se alguém reclamar que o endereço da página, título e outras porcarias nos rodapés estão impressos, aconselhe-o a configurar o navegador. Isso não é configurável do lado do site. Pelo menos não sei como. Por exemplo, no Firefox isso é configurado em “Imprimir” - “Configurações da página” - “Margens e rodapés”
7. Aliás, além do anterior. Digamos que o usuário desabilitou a exibição de todos os cabeçalhos e rodapés, incluindo o endereço da página. Ou seja, se o usuário olhar o impresso depois de algum tempo, não conseguirá entender de qual site o imprimiu. Então talvez valha a pena fazer uma pequena anotação indicando o recurso, endereço da página, logotipo ou qualquer outra coisa.
8. Use fonte grande (dentro do razoável, é claro). O principal é que tudo fique legível quando impresso.
10. Acho que precisamos usar dimensões independentes do dispositivo – dimensões absolutas. Por exemplo, em,cm,mm,pt,pc.
11. Aqui está um link útil http://www.webdevout.net/browser-support-css#css2propsprint. Descrições de estilos podem ser encontradas no site http://htmlbook.ru
Em geral, aconselho você a percorrer toda a lista de propriedades CSS, mesmo se você for um desenvolvedor experiente. Fiquei surpreso ao descobrir propriedades CSS desconhecidas e que algumas propriedades CSS já podem ser usadas sem medo.
Claro, esta não é uma lista completa de dicas. Esses são só meus pensamentos.
Muitas vezes você pode encontrar em sites uma versão para impressão de uma página específica. Muitas pessoas pensam que isso é algo embutido no próprio navegador ou que é feito de forma muito simples. Na verdade, isso não é verdade. A versão para impressão é uma página normal, que você precisa por conta própria fazer.
Você pode consultar a versão para impressão deste artigo. Na verdade, o que deveria ser exibido lá? Título do artigo, seção, categoria, autor, texto propriamente dito e data. Tudo isso é exibido nesta página. Você precisa de um menu, um formulário de pesquisa ou vários blocos? Acho que não, é por isso que eles não existem.
Certifique-se também de que a largura da versão para impressão seja não excede 650px, caso contrário o navegador poderá cortar as bordas.
Então você já entendeu isso versão para impressão Você precisa criá-lo sozinho, exibindo exatamente o que o usuário precisa. Agora vamos falar sobre como fazer isso.
Comer 2 opções: crie uma página separada e um arquivo de estilo separado. A primeira opção, penso eu, é clara. Crie outra página com versão para impressão e na página principal você fornece um link para esta versão impressa. O usuário o segue e através "Arquivo" -> "Imprimir" ele irá imprimi-lo.
A segunda opção envolve a criação de uma folha de estilos separada, onde você ocultará todos os blocos desnecessários (via Mostrar nenhum;) e defina os tamanhos apropriados para o conteúdo de saída. Então este arquivo de estilo é conectado da seguinte forma:
Agora se o usuário quiser imprimir esta página, então o que será impresso não é o que ele vê, mas sim o que está escrito nela imprimir.css. Na verdade, o usuário vê a página em uma visualização e a impressora em uma visualização completamente diferente.
Por aqui uma versão para impressão está sendo criada qualquer página do site.
Muitos usuários da Internet global nem sequer suspeitam que a Web seja um ambiente multifuncional que oferece diversas formas de fornecer informações. Neste caso, não nos referimos a multimídia - dados de áudio e vídeo, hoje muito difundidos, mas sim a fontes reais através das quais as pessoas obtêm informações na Web. A maior parte dos usuários da Internet utiliza uma tela para esses fins, que pode ser um dispositivo separado (monitor de PC) ou parte integrante de um dispositivo móvel com acesso à rede. Considerando o desenvolvimento bem-sucedido da tecnologia informática e a disponibilidade de computadores desktop e laptop e todos os tipos de aparelhos eletrônicos, é seguro dizer que hoje o monitor é o meio mais popular de visualização de páginas da web.
Seja como for, em alguns casos simplesmente não podemos prescindir de imprimir as páginas que nos interessam. É por isso que, em muitos sites, para cada documento à disposição do usuário, existe uma versão do mesmo que é utilizada na impressão em impressora. Mas devido ao fato de o desenvolvimento de tecnologias Web visar principalmente a apresentação visual de informações nas telas dos monitores em um navegador, muitas páginas da Web são impressas de uma forma que não é totalmente conveniente para leitura. Barras de navegação, banners para diversos fins e outros elementos semelhantes de uma página da web desorganizam sua apresentação visual na forma impressa. Além disso, grande parte desses elementos são projetados para interagir com o usuário por meio do navegador e, portanto, quando transferidos para o papel, não têm nenhuma utilidade. Portanto, cada vez mais nas páginas da web visitadas você pode encontrar links como "Versão impressa da página", permitindo visualizar o documento na tela na forma em que será impresso na impressora.
As ferramentas de especificação CSS permitem que os desenvolvedores web criem facilmente diferentes opções de apresentação de páginas dependendo de como elas são exibidas (monitor, impressora e muito mais). Este artigo discute maneiras de implementar essa abordagem usando CSS.
Fazendo conexões.
Existem várias maneiras de importar o conteúdo de folhas de estilo CSS externas para um documento HTML e definir as regras necessárias diretamente no arquivo de código-fonte da página.
Metatag .
A opção mais comum e familiar é usar uma meta tag. , que fornece um atributo de mídia que permite determinar o dispositivo para o qual o documento será formatado usando o arquivo CSS especificado. Aqui está um exemplo:
O exemplo acima inclui o arquivo CSS print_stylesheet.css, projetado para formatar o documento ao enviá-lo para uma impressora (media="print" ). Ou seja, para todos os demais casos de apresentação de uma página web (que não seja a versão impressa), não são levadas em consideração as regras CSS definidas no arquivo print_stylesheet.css. A especificação CSS define dez valores válidos para o atributo media, fornecendo diferentes dispositivos e formas de apresentação de informações da Web: todos, auditivo, braille, em relevo, portátil, impressão, projeção, tela, tty e tv. Neste artigo não consideraremos todos os valores, mas apenas aqueles que definem o dispositivo de impressão. Mas você também deve prestar atenção ao valor all , que é definido por padrão para o atributo media, a menos que seja especificado explicitamente de outra forma. Além disso, se um arquivo CSS específico se destina a formatar uma página ao enviar para vários tipos de dispositivos simultaneamente, as palavras-chave correspondentes podem ser especificadas em uma linha, separadas por vírgula:
Comando de importação CSS.
Você também pode usar a palavra-chave @media para incluir um arquivo CSS externo. A regra definida neste caso pode especificar vários tipos de mídia para os quais a formatação se destina. Neste caso, a sintaxe permite duas opções para escrever o comando:
@import url("styles/stylesheet.css") imprimir, projeção;
ou
@import "styles/stylesheet.css" impressão, projeção;
Como pode ser visto no exemplo, não há diferenças especiais entre as opções aceitáveis. Em um caso, a diretiva url é usada e o segundo envolve escrever o caminho para o arquivo CSS necessário sem ela. A regra de exemplo envolve a utilização do arquivo stylesheet.css localizado na pasta estilos, que se destina a formatar o documento para dispositivos com saída de informações paginadas (impressão - impressoras, projeção - projetores de slides e dispositivos similares).
Diretamente no documento html da página web.
Para fazer isso, use a regra CSS @media, dentro da qual são especificadas as propriedades de formatação do documento e os valores necessários para elas. Imediatamente após a palavra-chave @media, um ou mais tipos de mídia (separados por vírgulas) são especificados para os quais a formatação é executada: