jQueryを使うものはネットにあったのですが、このためだけにjQuery入れるのもどうかな〜と思ったので、javascriptだけで簡単に書いてみました。
用意するjavascript
htmlのヘッダー部分か、jsファイルにこのfunctionを追加してください。サブウィンドウを開いて印刷画面を表示します。
function printArea(id){
var area = document.getElementById(id).outerHTML;
var head = '';
var cmd = '<script>window.print();</script>';
var links = document.getElementsByTagName('link');
for (var i=0; i<links.length;i++){
head = head + links[i].outerHTML;
console.log(links[i].outerHTML);
}
var styles = document.getElementsByTagName('style');
for (var i=0; i<styles.length;i++){
head = head + styles[i].outerHTML;
console.log(styles[i].outerHTML);
}
var sub = window.open();
sub.document.write('<html><head>'+head+'</head><body>'+area+cmd+'</body></html>');
}
ポイントはこちらの２点
- 呼び出し元のHTMLからスタイルシート情報（link、style）タグを取得して、画面に表示されている通りのレイアウトを維持する
- サブウィンドウへのHTML出力の最後でwindow.print();を呼び出して、印刷画面を表示
画面の表示と印刷でスタイルを変えたいときは、getElementsByTagNameでスタイルを読みとっている部分を適当に変えてみてください。
呼び出し方
リンクなどでjavascriptを呼び出してみてください。印刷したい要素にidを割り当てて、printAreaにidを指定します。ブラウザごとにサブウィンドウ起動の可否が違うので、重要なシステムではテストを入念に行ってください。
<a href="javascript: printArea('printarea')">印刷する</a>
<div id="printarea">
<table>
<tr><th>ヘッダ</th><td>データ</td></tr>
<tr><th>ヘッダ</th><td>データ</td></tr>
</table>
</div>
実際に動かしてみる
何故かWordPressで動かすとWordPressのcssがちゃんと読み込めなくて、テーブルのスタイルが真っ白になっちゃうんですが、まぁこんな感じでうごきますよっと。
| ヘッダ | データ |
|---|---|
| ヘッダ | データ |
ありがとうございます。開発中のオフ会管理システムの行程表印刷の参考にさせていただきました。あまり複雑なプログラムは苦手ですがソースが見やすく、どこを弄ったり参考にすればいいのかが分かりやすかったです。
お役に立てたようで嬉しいです！ありがとうございます。