Webブラウザで印刷制御したい場合はどうすれば良いのでしょうか？
調べた所、ネット情報が少なかったのでまとめてみました。
今回は、Webブラウザを活用した印刷制御方法を紹介します。
JavaScript、CSSを活用することで以下のような事が出来ます。
- 設置したボタンをクリックして決まったテンプレート(ひな型)で印刷する
- データベースなどから取得したデータをブラウザ経由で動的に印刷する
- スマホを使って印刷する(自動でスマホ印刷フォーマットになる)
以下の制御も行えます。以下制御方法は別の記事にて紹介します。
↓
- 印刷の向きを横( or 縦)にセットする
- 印刷のページ区切りをセットする
- 印刷の余白を調整する
百文(聞)は一見に如かず、以下URLをクリックして実際のサンプルを見てみましょう。
https://www.youfit.co.jp/sample/webprint/1
動作確認は行いましたか？
ボタンによって別々の印刷プレビュー画面が表示されたと思います。
それでは実際にどのように実装したか帳票印刷時の制御方法を解説したいと思います。
プログラムの全体の流れを説明します。
- 印刷したいデータを準備する (例：DBよりデータ取得等、様々)
- 準備した印刷データをHTML化した後、Hiddenn状態(display: none;)にする
- 印刷ボタンにイベントを付与してJavaScriptを呼び出す
- JavaScript関数でHidden状態を解除(display: inline-block;)してプレビュー画面を表示する
それでは解説します。
1.印刷データを準備する (例：DBよりデータ取得等、様々)
ここは各自、好きなデータを準備して下さい。
恐らくですが、POST等で前画面から引張って来たデータを使用するか、同じ画面で検索したデータ取得結果を使用する事になるかと思います。
動作はまちまちなので詳しい説明は割愛します。
準備した印刷データをHTML化した後、Hiddenn状態(display: none;)にする
先のURLリンク先でソースの表示(操作方法：ブラウザ上で右クリックしてページのソースを表示 をクリック)をすると解るのですが、1番で準備したデータを印刷用のフォーマットに成形しています。成形した個所をDIVタグで囲んでいます。
□index.phpの中身(一部)
<div class="print_only">
<!-- 印刷時のみ表示する部分 -->
<div id="data_print">
<!-- dataPrint()で表示・非表示を切り替えるため、<div id="data_print">で囲む -->
<p>コード:0001</p>
<table border="1" style="border-collapse: collapse;">
<tr>
<td>名前</td>
<td>性別</td>
<td>年齢</td>
</tr>
<tr>
<td>A山 太郎</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<td>B川 花子</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>C田 一郎</td>
<td>男</td>
<td>20</td>
</tr>
</table>
</div>
</div>
styleシートを見ればわかるのですが、この print_only ID部分はdisplay:noneとなっておりWeb画面上には表示されません。
□style.cssの中身(一部)
/* 印刷時のみ表示する部分に割り当てる */
.print_only {
display: none;
}この非表示部分(id=print_only)は、印刷ボタンを押した状態( @media print)の時に表示されます。
では、全3ファイルの中身を見てみます。
□index.php
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" />
<script src="webprint.js"></script>
<title>Webブラウザ上で動的に印刷処理を行うサンプルプログラム</title>
</head>
<body>
<form>
<div class="print_pages">
<div class="no_print">
<!-- ブラウザにのみ表示する部分 -->
<!-- 印刷時に非表示にするため、<div class="no_print">で囲む -->
<input type="button" value="印刷のサンプル" onclick="dataPrint();">
</div>
<div class="print_only">
<!-- 印刷時のみ表示する部分 -->
<div id="data_print">
<!-- dataPrint()で表示・非表示を切り替えるため、<div id="data_print">で囲む -->
<p>コード:0001</p>
<table border="1" style="border-collapse: collapse;">
<tr>
<td>名前</td>
<td>性別</td>
<td>年齢</td>
</tr>
<tr>
<td>A山 太郎</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<td>B川 花子</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>C田 一郎</td>
<td>男</td>
<td>20</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
□webprint.js
function dataPrint() {
// 印刷部分を表示する
let data_element = document.getElementById('data_print');
data_element.className = "";
window.print();
}
□style.css
/* 印刷時のみ表示する部分に割り当てる */
.print_only {
display: none;
}
/* 印刷時のみ適用される設定 */
@media print {
/* 囲った箇所を1ページとする */
.print_pages {
page-break-before: always;
}
/* 印刷しない部分に割り当てる */
.no_print {
display: none;
}
/* ブラウザ表示時では非表示となっている箇所を表示する */
.print_only {
display: inline-block;
}
}
全ファイルの中身を見ればわかると思いますが、先に説明した通り、以下の流れが読み取れるかと思います。
- 印刷したいデータを準備する (例：DBよりデータ取得等、様々)
- 準備した印刷データをHTML化した後、Hiddenn状態(display: none;)にする
- 印刷ボタンにイベントを付与してJavaScriptを呼び出す
- JavaScript関数でHidden状態を解除(display: inline-block;)してプレビュー画面を表示する
いかがでしたでしょうか？無事にやりたい事が実現出来そうでしょうか？
もしうまくいった場合は、画面最下部にあるボタンより、どれかを いいね！ して頂けると嬉しいです。
あなたの開発にお役に立てたのでしたら幸いです。
株式会社ユーフィットは、システムの受託開発を行っている東京・福岡のシステム開発会社です。何かお困りごとがございましたら、気軽にご相談頂ければと思います。
