From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/guide/printing/index.html | 118 ++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 files/pt-br/web/guide/printing/index.html (limited to 'files/pt-br/web/guide/printing') 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 +--- +

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:

+ + + +

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 {{HTMLElement("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 {{domxref("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:

+ +
<!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 {{HTMLElement("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 {{HTMLElement("iframe")}}.
+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf