Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
Printing
Pode haver momentos em que seu site ou aplicação queira melhorar a experiência do usuário quando imprime um conteúdo. Existem diversos cenários possíveis:
- Você deseja ajustar o layout para tirar vantagem do tamanho e forma do papel.
- Você deseja usar diferentes estilos para melhorar a aparência do seu conteúdo no papel.
- Você deseja aumentar a resolução das imagens para um melhor resultado.
- Você quer ajustar a experiência do usuário de impressão, como apresentar uma versão especialmente formatada de seu conteúdo antes da impressão começar.
Podem haver outros casos onde você precisa gerenciar o processo de impressão, mas estes são alguns dos cenários mais comuns. Este artigo ensina dicas e técnicas para te ajudar a imprimir conteudo web de uma melhor forma.
Usando uma folha de estilos para impressão
Adicione o seguinte código dentro da tag<head>.
<link href="/path/to/print.css" media="print" rel="stylesheet" />
Usando media queries para melhorar o layout
Detectando requisições de impressão
Alguns navegadores (incluindo o Firefox 6 e versões mais antigas do Internet Explorer) enviam eventosbeforeprint eafterprint para permitir que o conteúdo determine quando a impressão deve ocorrer. Você pode usar isto para ajustar a interface presente durante a impressão (como a exibição ou ocultação de elementos de interface do usuário durante o processo de impressão).
Nota:Você também pode usarwindow.onbeforeprint ewindow.onafterprint para atribuir manipuladores para esses eventos, mas usandoEventTarget.addEventListener() é preferível.
Exemplos
Aqui estão alguns exemplos comuns.
Abrir e fechar automaticamente uma janela popup quando finalizado
If you want to be able to automatically close apopup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this:
<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JavaScript Window Close Example</title> <script type="text/javascript"> function popuponclick() { my_window = window.open( "", "mywindow", "status=1,width=350,height=150", ); my_window.document.write("<html><head><title>Print Me</title></head>"); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write( "<p>When you print this window, it will close afterward.</p>", ); my_window.document.write("</body></html>"); } </script> </head> <body> <p> To try out the <code>afterprint</code> event, click the link below to open the window to print. You can also try changing the code to use <code>beforeprint</code> to see the difference. </p> <p><a href="#">Open Popup Window</a></p> </body></html>Imprimir uma página externa sem abri-la
If you want to be able to print an external page without opening it, you can utilize a hidden<iframe> (see:HTMLIFrameElement), automatically removing it after the user prints its contents. The following is a possible example which will print a file namedexternalPage.html:
<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>MDN Example</title> <script type="text/javascript"> function closePrint() { document.body.removeChild(this.__container__); } function setPrint() { this.contentWindow.__container__ = this; this.contentWindow.onbeforeunload = closePrint; this.contentWindow.onafterprint = closePrint; this.contentWindow.focus(); // Required for IE this.contentWindow.print(); } function printPage(sURL) { var oHiddFrame = document.createElement("iframe"); oHiddFrame.onload = setPrint; oHiddFrame.style.position = "fixed"; oHiddFrame.style.right = "0"; oHiddFrame.style.bottom = "0"; oHiddFrame.style.width = "0"; oHiddFrame.style.height = "0"; oHiddFrame.style.border = "0"; oHiddFrame.src = sURL; document.body.appendChild(oHiddFrame); } </script> </head> <body> <p> <span >Print external page!</span > </p> </body></html>Nota:Older versions of Internet Explorer cannot print the contents of a hidden<iframe>.