1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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>
|
