diff options
Diffstat (limited to 'files/pt-br/web/guide/printing/index.html')
| -rw-r--r-- | files/pt-br/web/guide/printing/index.html | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/files/pt-br/web/guide/printing/index.html b/files/pt-br/web/guide/printing/index.html new file mode 100644 index 0000000000..7819266b9f --- /dev/null +++ b/files/pt-br/web/guide/printing/index.html @@ -0,0 +1,118 @@ +--- +title: Printing +slug: Web/Guide/Printing +translation_of: Web/Guide/Printing +--- +<p>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:</p> + +<ul> + <li>Você deseja ajustar o layout para tirar vantagem do tamanho e forma do papel.</li> + <li>Você deseja usar diferentes estilos para melhorar a aparência do seu conteúdo no papel.</li> + <li>Você deseja aumentar a resolução das imagens para um melhor resultado.</li> + <li>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.</li> +</ul> + +<p>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.</p> + +<h2 id="Usando_uma_folha_de_estilos_para_impressão">Usando uma folha de estilos para impressão</h2> + +<p>Adicione o seguinte código dentro da tag {{HTMLElement("head")}}.</p> + +<pre class="notranslate"><link href="/path/to/print.css" media="print" rel="stylesheet" /> +</pre> + +<h2 id="Usando_media_queries_para_melhorar_o_layout">Usando media queries para melhorar o layout</h2> + +<h2 id="Detectando_requisições_de_impressão">Detectando requisições de impressão</h2> + +<p>Alguns navegadores (incluindo o Firefox 6 e versões mais antigas do Internet Explorer) enviam eventos <code>beforeprint</code> e <code>afterprint</code> 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).</p> + +<div class="note"><strong>Nota:</strong> Você também pode usar <a href="/en-US/docs/DOM/window.onbeforeprint" title="DOM/window.onbeforeprint"><code>window.onbeforeprint</code></a> e <a href="/en-US/docs/DOM/window.onafterprint" title="DOM/window.onafterprint"><code>window.onafterprint</code></a> para atribuir manipuladores para esses eventos, mas usando {{domxref("EventTarget.addEventListener()")}} é preferível.</div> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Aqui estão alguns exemplos comuns.</p> + +<h4 id="Abrir_e_fechar_automaticamente_uma_janela_popup_quando_finalizado">Abrir e fechar automaticamente uma janela popup quando finalizado</h4> + +<p>If you want to be able to automatically close a <a href="/en-US/docs/DOM/window.open" title="DOM/window.open">popup window</a> (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this:</p> + +<pre class="brush: html notranslate"><!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> +</pre> + +<div><a href="https://wiki.developer.mozilla.org/samples/domref/printevents.html">Ver Exemplo</a></div> + +<h3 id="Imprimir_uma_página_externa_sem_abri-la">Imprimir uma página externa sem abri-la</h3> + +<p>If you want to be able to print an external page without opening it, you can utilize a hidden {{HTMLElement("iframe")}} (see: <a href="/en-US/docs/DOM/HTMLIFrameElement" title="DOM/HTMLIFrameElement">HTMLIFrameElement</a>), automatically removing it after the user prints its contents. The following is a possible example which will print a file named <code>externalPage.html</code>:</p> + +<pre class="brush: html notranslate"><!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> +</pre> + +<div class="note"><strong>Nota:</strong> Older versions of Internet Explorer cannot print the contents of a hidden {{HTMLElement("iframe")}}.</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/DOM/window.print" title="DOM/window.print"><code>window.print</code></a></li> + <li><a href="/en-US/docs/DOM/window.onbeforeprint" title="DOM/window.onbeforeprint"><code>window.onbeforeprint</code></a></li> + <li><a href="/en-US/docs/DOM/window.onafterprint" title="DOM/window.onafterprint"><code>window.onafterprint</code></a></li> + <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li> + <li>{{cssxref("@media")}}</li> +</ul> |