印刷ボタンで特定の範囲を印刷するjQuery

2018/04/24 サイト制作, 技術系 投稿者:竹内

お客様のホームページのリニューアルにあたり、
「レシピページのレシピの部分だけを印刷出来るようにしたい」
「お客様が簡単に印刷出来るように画面キャプチャーなどではなく、ボタンひとつで印刷できるように」
との要望を頂きました。
こちらの要望について、できるかどうかの検証をとってみたいと思います。

※ この記事では思い通りの印刷結果になりませんでした。

次回の記事で解決していますのでそちらも御覧ください。
「印刷ボタンで特定の範囲を印刷するjQuery その2」

特定の範囲を印刷できるボタンを設置するjQuery

こちらを参考にさせて頂きました。
指定範囲を簡単に印刷するjQueryプラグイン jPrintArea.js が便利な件

ささっと動作確認

1.スクリプトファイルを作成します。print.jsとしました。

2.HTMLで読み込む

3.印刷ボタンの設置

4.印刷範囲をid指定する(id=”printarea”)

5.ソース全体(CSSは省略)

デモページをみる

ひとまず、想定通りの動きになりました。
印刷ボタンひとつで特定の画像のみ印刷することに成功しました。
テキスト等を加えても大丈夫のようです。

レシピをキレイに印刷出来るか?

ここからさらに検証です。
Webページの印刷で気になるのが、「CSSで指定された背景等も印刷されるか?」という部分です。
画像、テキスト、食材リストなど簡単にマークアップし、背景画像を設定して印刷してみます。

HTML

CSS

デモページをみる

結果!色々試してみましたがだめでした!

印刷ボタンからの印刷では、CSSと背景画像が読み込まれない

ご覧の通り、CSSと背景は読み込まれないようですのでこの状態では使い物になりません。

ページ全体の印刷であればブラウザ表示の通りに印刷できる


・IE11の場合は [ページ設定]内の[背景の色とイメージを印刷する(C)]にチェックを
・FireFoxの場合は [ページ設定]内のオプション[背景色と背景画像も印刷]にチェックを
・Google Chromeの場合は [印刷プレビュー]の[+詳細設定]を開いて[背景のグラフィック]にチェックを


この設定でブラウザ機能の印刷機能であればブラウザ表示の通りに印刷出来ます。

印刷ボタンを設置して簡単操作で特定の範囲だけ印刷するという目的は全く達成されておりませんし、ヘッダーとフッターも印刷されてしまいます。

※ Microsoft EdgeとGoogle Chromeの印刷に注意!

Window10のデフォルトブラウザのMicrosoft Edgeでは背景画像も印刷する設定がありません。公式でMicrosoftが「IE11で使えるのでそちらでお願いします。」とコメントしています。
また、「Google Chromeの場合は」と書きましたが、今回の件のような[印刷する]ボタンを押してからの印刷プレビューが真っ白で印刷出来ない方が多いようです。(メニューからの印刷では正常に印刷できます。)
私もそうでした。同系列のブラウザ「Vivaldi」でも同様でした。
拡張機能を全部消したり、ブラウザ設定の初期化をすると表示されるらしいので試してみましたが改善しませんでした。(ちゃんと印刷出来る人もいらっしゃるようです。)

まとめ

今回の目的は、「ホームページ閲覧者が簡単操作で必要なところだけそのまま印刷出来る機能の実装」でしたがうまくいきませんでした。

特定の範囲だけ印刷させる事は可能ですが、ブラウザ表示の通りに印刷出来ない。
ブラウザ表示の通りに印刷させると必要ないところも印刷されてしまう。

という結果でした。

「印刷時用のCSSを導入する」
という従来どおりの手法が一番シンプルで確実なのでは?」と思う結果です。

ですが、ソースから印刷したい部分だけ抜き出して印刷出来るという今回の手法に可能性が見えます。
もうちょっと工夫して印刷用CSSと連携してうまいこと出来ないかどうか試してみたいと思います。
次回この続きを記事にできればと思います。

Webサイト制作界隈では、打合せ等で印刷したサイトを使用する場合に「画面をキャプチャーして印刷」を行っている方も多いのではないでしょうか?
Webサイトとブラウザとプリンターどれも昔から存在しているのに「Webサイトをそのまま印刷する」事すらスマートじゃないのはなんとかなりませんかね。。。

Windows 7 の延長サポート終了まで

days
4
2
4
hours
1
5
minutes
5
2
seconds
1
6

Office 2010 の延長サポート終了まで

days
6
9
7
hours
1
5
minutes
5
2
seconds
1
6

カレンダー

   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)