Adicione um botão ou link de impressão à sua página da Web

O CSS (folhas de estilo em cascata) oferece um controle considerável sobre como o conteúdo de suas páginas da web é exibido na tela. Esse controle também se estende a outras mídias, como quando a página da web é impressa.

Você pode estar se perguntando por que deseja adicionar um recurso de impressão para sua página da web; afinal, a maioria das pessoas já sabe ou pode descobrir facilmente como imprimir uma página da web usando os menus do navegador.

Mas há situações em que adicionar um botão de impressão ou ligação para uma página não apenas facilitará o processo para os usuários quando eles precisarem imprimir uma página mas, talvez ainda mais importante, ofereça mais controle sobre como essas impressões aparecerão papel.

Veja como adicionar botões ou links de impressão nas suas páginas e como definir quais partes do conteúdo da sua página serão impressas e quais não.

Adicionando um botão Imprimir

Você pode adicionar facilmente um botão de impressão à sua página da Web adicionando o seguinte código ao documento HTML onde deseja que o botão apareça:

instagram viewer
onclick = "window.print (); retorne false;" />

O botão será identificado como Imprimir esta página quando aparecer na página da web. Você pode personalizar esse texto para o que quiser, alterando o texto entre aspas a seguir

value =
no código acima.
Observe que existe um único espaço em branco antes e depois do texto; isso melhora a aparência do botão, inserindo algum espaço entre as extremidades do texto e as bordas do botão exibido.

Adicionando um link de impressão

É ainda mais fácil adicionar um link simples de impressão à sua página da web. Basta inserir o seguinte código no documento HTML onde deseja que o link apareça:

impressão

Você pode personalizar o texto do link alterando "imprimir" para o que quiser.

Como imprimir seções específicas

Você pode configurar a capacidade de os usuários imprimirem partes específicas da sua página da web usando um botão ou link de impressão. Você pode fazer isso adicionando um print.css no seu site, chamando-o no cabeçalho do documento HTML e, em seguida, definindo as seções que você deseja tornar facilmente imprimíveis definindo uma classe.

Primeiro, adicione o seguinte código à seção principal do seu documento HTML:

type = "text / css" media = "impressão" />

Em seguida, crie um arquivo chamado print.css. Nesse arquivo, adicione o seguinte código:

body {visibilidade: oculto;}
.print {visibilidade: visível;}

Este código define todos os elementos do corpo como ocultos ao serem impressos, a menos que o elemento tenha a classe "print" atribuída a ele.

Agora, tudo o que você precisa fazer é atribuir a classe "print" aos elementos da sua página da web que você deseja imprimir. Por exemplo, para tornar uma seção definida em um elemento div imprimível, você usaria

Qualquer outra coisa na página que não esteja atribuída a esta classe não será impressa.

instagram story viewer