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

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

前回の記事(印刷ボタンで特定の範囲を印刷するjQuery)の続きです。

前回の検証結果から「印刷ボタンで特定の範囲を印刷するjQuery」は特定の範囲の「HTMLソース」を抜き出して印刷するのではないかと推測されます。
ということは「印刷範囲のソース内にCSSも記述してあれば、Webサイトの見た目通りに印刷できる」のでは?と考えました。

前回のHTMLソースにCSSを書き込み印刷ボタンから印刷してみる

まずは簡単に、そのままCSSを読み込む記述を追加してみます。HTMLコーディングルールとしてはイマイチよろしくありませんが、「HTMLソースを抜き出して印刷している」という部分の検証になります。

印刷範囲内のHTMLソースにCSSを記述

外部ファイルCSSとは背景画像のパスが変更になるので注意です。

印刷してみる

早速印刷ボタンから印刷してみます。

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

印刷結果→ダメでした

CSSが読み込まれている気配がありません。

追加調査

なんとかならないものか、スクリプトファイルの見直しからしてみます。

スクリプトファイルの中身

中をよくみると、9行目と10行目にCSSファイルを読み込んでいるような記述があります。
「type=”text/css”」記述が古そうなのでここを実際の記述にあわせてあげればいけるのでは?
しかもCSSをここで読んでくれているということは先程のHTML内のCSSも必要ないはずです。

つまり、前回と今回使用しているスクリプトはもとから印刷にCSSが反映されるようになっている。ということです。私がスクリプトの設置方法を間違っていただけでした。

加えてCSSの下のdivの記述も気になりますので、HTMLもあわせてみます。
sectionはCSSで使用しているので、一個外側をdivで囲ってみます。

スクリプトファイルとHTMLの修正

10行目type=”text/css”を取り記述をあわせてあげます。

HTMLも変更します。38行目と39行目、もとはsectionにつけていたid=”printarea”をひとつ外側にdivで囲ってそのdivに対して指定しました。
最終的にHTMLは以下のようになりました。

印刷結果は成功!

目的の部分だけ背景画像やCSSを読み込んだ形で印刷されています。

デモページをみる

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

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

まとめ

試行錯誤の結果、なんとか目的通りの形で印刷する事ができました。
今まではスクリプトファイルをネットで紹介されているものをそのまま試して使えたものだけ利用してきました。
今までそのまま使って動かなかったスクリプトもよく中身を調べたら動いていたことでしょう。
今後はスクリプトファイルの中身ももうちょっと良く調べてみようと思います。

カレンダー

     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(エニューム)