printThisを使って特定要素を印刷する。(スクロールバーに隠された部分も含む)

主題の通り、jQueryプラグインであるprintThisを利用して、特定の要素を印刷してみたので共有します。(スクロールバーで隠された部分も印刷されます)

1.インストール

printThis

github.com

jQuery

jquery.com

2.まずはprintThisを使わずに

以下のようなhtmlがあるとします。

don't use printThis

 

上記は以下のように表示されます。

f:id:kentei0715:20171104201238p:plain

印刷ボタンを押すと実際にこのページが印刷されます。
当たり前のようにスクロールバーが印刷され、以下のように「最後のセル1~3」を見ることはできません。

f:id:kentei0715:20171104201331p:plain

3.じゃあprintThisを使ってみよう

use printThis

 

head要素でscriptを読み込み、onclick属性の処理を変えただけです。
なので、ブラウザ上の表示は変わりません。

f:id:kentei0715:20171104201238p:plain

ただし、印刷ボタンを押すと、
以下のように指定した部分のみ印刷され、さらにスクロールバーも出ません。(テーブルを指定しているから当たり前ですが)

f:id:kentei0715:20171104201505p:plain

4.終わりに

結構使い道があると思います。しかもこのプラグインは様々なブラウザに対応しているので、使い勝手が良かったりします。

以上です。

 

2017/11/9  賢帝俊来