JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.print()でこのページを印刷ボタンをクリックしたら指定範囲を印刷

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.print()

JavaScriptの.print()でこのページを印刷ボタンをクリックしたら指定範囲を印刷

JavaScriptの.print()でこのページを印刷ボタンをクリックしたら指定範囲を印刷

JavaScriptの .print() を使って、ボタンクリックするとそのページが印刷されるボタンを作ってみました。

かかかず
かかかず

少し前のWebメディアでよく見かけた「このページを印刷」のボタンです。

印刷対象外の指定も比較的簡単なので、ブログや、メディアを運営している方は参考にしてみてください。

.print()

avaScriptの.print()は、現在の文書を印刷するための印刷ダイアログを開くメソッドです。

window.print()

このメソッドが実行されると、それ以降の処理が中断しダイアログを閉じた後に、処理が引き続き実行されます。

windowは省略可能

調べてみると、「window」は省略しても可だそうです。試しに省略して記述してみましたが、バッチリ動きます。が、極力可読しやすいコードにしたいので、この記事では省略せずに記述しています。

印刷可能なボタンのサンプル

早速サンプルです。以下の「このページを印刷」をクリックすると、印刷するためのダイアログが表示されます。

印刷のプレビューでは、このページの「このページを印刷」ボタンと、PCの場合左のサイドメニューが非表示の形で印刷されます。

このダイアログは、ブラウザーで印刷メニューを選択したときと同じ動作となります。

CSSでも非表示指定も可能

印刷範囲の指定の為、CSSの @media print のメディアクエリでタグやclass名を指定して非表示にすることもできます。ですが、この記事のコードでは、メディアクエリを使わずに、全てJavaScriptで制御させています。

実装の手順と方法

手順と方法

コードの解説の前に、実装の手順と方法について解説します。

HTMLを記述

まずはじめに、HTMLに印刷ボタンを表示したい場所へコードを記述します。

<button id="pagePrint">このページを印刷</button>
JavaScriptを記述

次にJavaScriptを記述します。

コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

document.getElementById('pagePrint').addEventListener('click', () => {
 const side = document.querySelector('.wordpressside');
 const btn = document.querySelector('.javaSample');
 const main = document.getElementById('wordpressinner');
 const widthOriginal = main.style.paddingLeft; // 元のpaddingを覚えておく
 side.style.display = 'none'; //印刷時に非表示
 btn.style.display = 'none'; //印刷時に非表示
 main.style.paddingLeft = '0';
 window.print();
 side.style.display = 'block'; //印刷終わったら戻す
 btn.style.display = 'block'; //印刷終わったら戻す
 main.style.paddingLeft = widthOriginal; // 元のpaddingに戻す
});
かかかず
かかかず

これで完了です。

ざっくりとしたコードの解説

コードは、HTML・JavaScriptの2種類です。順に解説していきます。

HTML

HTMLはid名に「pagePrint」を付与した button タグ、これだけです。

<button id="pagePrint">このページを印刷</button>

id名は .addEventListener のトリガーになるので、変更する場合はJavaScriptの .getElementById の中も同じものに変更するようにしてください。

JavaScript

JavaScriptは、.addEventListener のクリックで発動し、まずはじめの const で非表示にする要素を指定します。

要素が指定できたら、それらの display プロパティを「none」にします。尚、当サイトのこのページは左メニューがあるのでその部分だけ padding-left も対象にしてします。

document.getElementById('pagePrint').addEventListener('click', () => {
 const side = document.querySelector('.wordpressside');
 const btn = document.querySelector('.javaSample');
 const main = document.getElementById('wordpressinner');
 const widthOriginal = main.style.paddingLeft; // 元のpaddingを覚えておく
 side.style.display = 'none'; //印刷時に非表示
 btn.style.display = 'none'; //印刷時に非表示
 main.style.paddingLeft = '0';
 window.print();
 side.style.display = 'block'; //印刷終わったら戻す
 btn.style.display = 'block'; //印刷終わったら戻す
 main.style.paddingLeft = widthOriginal; // 元のpaddingに戻す
});

そして、その後に window.print(); で印刷ダイアログが立ち上がり、完了後に元の状態に戻ります。

さいごに

このようなコードで印刷ボタンの実装が可能で、これに加えてCSSのメディアクエリの print で印刷のサイズや表示要素も細かく指定すれば、尚GOODです。