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 e window.onafterprint 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 (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), 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