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 eventos `beforeprint` e `afterprint` 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 usar `window.onbeforeprint` (en-US) e `window.onafterprint` (en-US) para atribuir manipuladores para esses eventos, mas usando `EventTarget.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 a popup window (en-US) (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this:


```html
<!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="javascript: popuponclick()">Open Popup Window</a></p>
  </body>
</html>
```


Ver Exemplo

### 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 (en-US)), automatically removing it after the user prints its contents. The following is a possible example which will print a file named `externalPage.html`:


```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
 onclick="printPage('externalPage.html');"
 style="cursor:pointer;text-decoration:underline;color:#0000ff;"
 >Print external page!</span
 >
    </p>
  </body>
</html>
```


**Nota:** Older versions of Internet Explorer cannot print the contents of a hidden `<iframe>`.

Veja também
-----------

* `window.print` (en-US)
* `window.onbeforeprint` (en-US)
* `window.onafterprint` (en-US)
* Media queries (en-US)
* `@media` (en-US)