JavaScriptの .print() を使って、ボタンクリックするとそのページが印刷されるボタンを作ってみました。
少し前のWebメディアでよく見かけた「このページを印刷」のボタンです。
印刷対象外の指定も比較的簡単なので、ブログや、メディアを運営している方は参考にしてみてください。
.print()
avaScriptの.print()は、現在の文書を印刷するための印刷ダイアログを開くメソッドです。
window.print()このメソッドが実行されると、それ以降の処理が中断しダイアログを閉じた後に、処理が引き続き実行されます。
調べてみると、「window」は省略しても可だそうです。試しに省略して記述してみましたが、バッチリ動きます。が、極力可読しやすいコードにしたいので、この記事では省略せずに記述しています。
印刷可能なボタンのサンプル
早速サンプルです。以下の「このページを印刷」をクリックすると、印刷するためのダイアログが表示されます。
印刷のプレビューでは、このページの「このページを印刷」ボタンと、PCの場合左のサイドメニューが非表示の形で印刷されます。
このダイアログは、ブラウザーで印刷メニューを選択したときと同じ動作となります。
印刷範囲の指定の為、CSSの @media print のメディアクエリでタグやclass名を指定して非表示にすることもできます。ですが、この記事のコードでは、メディアクエリを使わずに、全てJavaScriptで制御させています。
実装の手順と方法
コードの解説の前に、実装の手順と方法について解説します。
まずはじめに、HTMLに印刷ボタンを表示したい場所へコードを記述します。
<button id="pagePrint">このページを印刷</button>次に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です。
