印刷

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

コンテンツを印刷するときに、Web サイトまたはアプリケーションでユーザーエクスペリエンスを向上させたい場合があります。考えられるシナリオはいくつかあります。

  • 紙のサイズと形を利用するようにレイアウトを調整したい
  • 紙の上のコンテンツの見栄えをよくするために、さまざまなスタイルを使用したい
  • より良い結果を得るためには、より高い解像度の画像を使用したい
  • 印刷を開始する前に特別にフォーマットされたコンテンツを表示するなど、印刷のユーザーエクスペリエンスを調整したい

他にも印刷処理を管理したい場合がありますが、これらは最も一般的なシナリオの一部です。この記事では、Web コンテンツの印刷品質を向上させるためのヒントとテクニックを紹介します。

印刷用スタイルシートを使用する

Add the following to your <head> tag.

<link href="/path/to/print.css" media="print" rel="stylesheet" />

レイアウトを改善するためのメディアクエリの使用

印刷リクエストを検出する

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.

Here are some common examples.

Open and automatically close a popup window when finished

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>

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>
Note: Older versions of Internet Explorer cannot print the contents of a hidden <iframe>.

あわせて参照