Printing

There may be times in which your web site or application would like to improve the user's experience when printing content. There are a number of possible scenarios:

  • You wish to adjust layout to take advantage of the size and shape of the paper.
  • You wish to use different styles to enhance the appearance of your content on paper.
  • You wish to use higher resolution images for a better result.
  • You want to adjust the user experience of printing, such as presenting a specially-formatted version of your content before printing begins.

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

Some browsers (including Firefox 6 and later and Internet Explorer) send beforeprint and afterprint events to let content determine when printing may have occurred. You can use this to adjust the user interface presented during printing (such as by displaying or hiding user interface elements during the print process).

Note: You can also use window.onbeforeprint and window.onafterprint to assign handlers for these events, but using EventTarget.addEventListener() is preferred.

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:

<!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>

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:

<!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