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

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

かかかず

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

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

.print()

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

window.print()

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

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

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

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

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

実装の手順と方法

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

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

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です。