指定範囲のみ印刷

演奏依頼書のExcelとPDFを作るのが、ちょっと手間だったので、サイトに記載したものを、そのままプリントアウトして、使ってもらえるようにしてみました。

要らない部分は印刷されないよう範囲指定して、そこだけ印刷します。

jQueryプラグインを使えば、印刷画面を作らなくても、そのままプリントできて便利♪


◆『jQuery.jPrintArea.js』をアップ

テストしてみたところ、ダイアログのコメントはいらないように思ったので、出ない方のコードに。

◆『header.php』のヘッダにJSリンクと記述を追加

<?php wp_head(); ?> の後(jQueryの記述後)に、以下のように記述。

<script src=”<?php echo get_stylesheet_directory_uri() ?>/js/jQuery.jPrintArea.js”></script>
<script text=”javascript/text”>
jQuery(document).ready(function($){
$(‘#btn_print’).click(function(){
$.jPrintArea(“#printarea”);
});
});
</script>

◆固定ページの印刷したい範囲をidで囲う

依頼書tableの前後に、以下のように記載。
ボタンは、テキストをボタンにして、CSSで装飾。

<div id=”printarea”>
~印刷したいテーブルの内容~
</div>
<p class=”btn-right”><a href=”#” id=”btn_print”>演奏依頼書を印刷する</a></p>

◆スタイルシート調整

印刷プレビューは、レイアウト崩れなどの問題は特になかったので、ボタン部分の調整のみを追加。


◆参考サイト

コメントを残す