Como adicionar um botão de impressão para a sua página web

Você sabe, algo como adicionar um botão de impressão para uma página web soa bastante simples, certo? Na verdade, por que nós ainda precisa adicionar nenhum botão de impressão ou link para a página em tudo, quando tudo o leitor tem a fazer é clicar em “Arquivo

Em última análise, as pessoas diferentes querem o recurso de impressão na sua página web por razões diferentes. Você pode apenas querer adicionar conveniência. Quando o leitor pode simplesmente clicar um botão para obter uma impressão - ele economiza alguns cliques, e cada clique conta. Outras pessoas querem personalizar o texto impresso - em outras palavras, ocultar determinados elementos da página de impressão. Em outras situações, as pessoas preferem criar uma versão cuidadosamente personalizado, impressão do site.

Para cada uma destas situações, existem soluções diferentes. Nós sempre tentamos oferecer soluções de impressão inovadoras aqui no MUO, como o artigo de Justin sobre impressão em meias-páginas e artigo de Karl em PrintWhatYouLike. Neste artigo eu estou indo para fornecer quatro maneiras que você pode integrar um botão de impressão ou link em seu site - a partir do HTML muito simples e abordagem javascript, para a abordagem CSS mais personalizável. Economize papel Formatação & Imprimir seus arquivos com ferramenta de imposição de Govert [Windows]Economize papel Formatação & Imprimir seus arquivos com ferramenta de imposição de Govert [Windows]custa dinheiro de papel. Economizar imprimindo seus PDFs em meias-páginas. Se você quer um folheto ou cópias de side-by-side, uma ferramenta gratuita para Windows não só torna isso possível, mas também simples. Pare de brincar ...consulte Mais informação

Integrando impressão em seu site

Quando você olha para qualquer página da web, é muito fácil ver por que você pode querer personalizar a impressão. A webpage típica tem anúncios, banners, links de anúncios, barras laterais e seções de rodapé que não fazem nada mais do que comer espaço da página e wastefully consomem papel.

Se você tem um site bastante simples, ou você realmente não me importo se ou não todos os gráficos e estampas de formatação, então tudo que você tem a fazer é adicionar um botão simples de sua página web e usar o “print ()” método javascript para enviar a página para a impressora.

Colocar este código em seu site em um local que é rápido e fácil para os seus leitores a usar é algo como isto.

Tudo o leitor tem que fazer é clicar no botão ea página será enviado diretamente para a impressora sem qualquer formatação de página qualquer. Se a página for além da largura de impressão para a impressora, é possível que você poderia acabar imprimindo muito mais páginas do que é realmente necessário.

Video: Colocando link na página - Curso HTML Avançado - Aula 7 [HD] - FamwebTV

Algumas pessoas realmente não gosto da aparência de um botão de formulário, de forma alternativa, você pode simplesmente usar um link com o javascript incorporado para fazer exatamente a mesma coisa.

Imprimir esta página

Você pode ver como, em muitos casos um texto simples parece muito mais limpo do que um botão, mas que você usa realmente se resume a que fica melhor na área da página web onde você quer fornecer a funcionalidade de impressão.

Como você pode ver a partir do exemplo de impressão acima, a formatação de muitos anúncios e banners não combinam perfeitamente com a exibição do navegador quando você simplesmente usar o comando de impressão. Isto torna-se muito mais aparente para sites mais complexos. Outra abordagem pessoas usam é bloquear seções inteiras do site usando CSS, e atribuir seções específicas da página para imprimir. Para fazer isso, primeiro que liga o arquivo CSS na seção de cabeçalho.

Em seguida, você precisa criar o arquivo CSS real e salve-o no mesmo diretório que a sua página web. O arquivo CSS deve atribuir todas as seções da página que não deve ser impresso, e depois também fazer os elementos da página que você atribui a imprimir como visível.

DIV # cabeçalho, DIV # newflash, DIV # bandeira {display: nenhum-} corpo. {Visibility: hidden -} print {visibilidade: visible-}

Agora que o seu arquivo CSS está configurado, tudo que você tem a fazer é ir através de sua página e marcar cada seção com a classe “print”.

Esta linha vai ser impressa.
Esta linha não vai.

Agora você pode ver na impressão onde somente as seções da página marcado com a classe “print” são impressos para a página, e todas as outras seções não. A única dificuldade com esta abordagem é que você tem que certificar-se de desativar a exibição de todas as seções DIV que você não quer impresso. Como você pode ver abaixo, eu não adicionar a seção “div” para o Google Ad, de modo que ainda impresso.

Pode levar algum tempo para construir o arquivo CSS e colocar para fora as classes corretamente. Se você realmente não quer se preocupar fazendo isso em todas as páginas, então você pode optar por uma última abordagem. Esta é a minha técnica favorita para fornecer perfeitamente formatados versões, de impressão da página. Tudo que você tem a fazer é criar uma versão PDF formatado do conteúdo de páginas web, salve-o em seu host, e depois vincular o arquivo no cabeçalho da página.

Isso é tudo que você tem que fazer! Você pode incorporar o botão de impressão em seu site apenas como nos exemplos acima, mas em vez do arquivo CSS carregados para o método de impressão, o PDF, DOC ou outro arquivo é enviado para a impressora. Como você pode ver abaixo, isso gera a versão mais limpo de impressão da página, e você pode muito bem personalizá-lo para parecer exatamente como você deseja que ele.

Como você pode ver, há uma abundância de opções para escolher quando você quer colocar um botão de impressão ou link na sua página. Qualquer uma dessas opções funcionam bem, mas a escolha certa realmente se resume a quão complexo o site é, e qual o conteúdo que você deseja oferecer seus leitores quando eles optar por imprimir sua página.

Video: colocar botão imprimir no FireFox

Já experimentou qualquer uma destas técnicas para adicionar um botão de impressão para uma página web? Qual a técnica que você mais gosta? Você tem outras soluções? Partilhe a sua visão na seção de comentários abaixo.