[JavaScript] Web ページに印刷ボタンをつける

Posted by
ぴろり
Posted at
2007/07/04 01:48
Trackbacks
関連記事 (0)
Comments
コメント (3)
Post Comment
コメントできます
Category
開発メモ カテゴリ
カバーイメージ

 Web ページなどに「このページを印刷する」ボタンを置いて、ユーザが印刷ボタンをクリックすると印刷ダイアログを出すための覚書。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

動作サンプル

プリンタのアイコンこのページを印刷する

 印刷ボタンを押すと JavaScript が実行されるようにリンクを設置し、JavaScript では、window オブジェクトの print メソッドを呼び出すようにします。印刷ボタンをクリックすると、Web ブラウザの印刷用ダイアログを表示されるようになります。ダイアログが表示されるだけで、実際に印刷を行うには、ユーザーが用紙サイズなどを選択して、ダイアログの実行ボタンを押す必要があります。

上のサンプルで使用しているアイコンは Tango Icon Gallery から頂きました。

<a href="#" onclick="window.print();return false;">
<img src="document-print.png" alt="プリンタのアイコン" title="このページを印刷する" />
このページを印刷する
</a>

GMail での実装を見るとwindow.print(); の直前に document.body.offsetHeight;と書かれていますがこの部分の意図は不明。何かのhack?

ところで

 Web制作者にはCSSの画面上での見栄えだけでなく、印刷された時の見栄えも気にして欲しいですね。印刷するとサイドバーやAdSenseだけで1ページもって行かれたり、記事本文がページ末端でブチ切れて肝心の部分が見えなかったりと悲惨なページに遭遇することがあります。記事以外の広告やブログパーツ、最近のコメント一覧などのユーザの印刷物にとって不要な部分には display:none; を指定した印刷用の CSS を用意するだけでとりあえずは十分です。自分のサイトをお持ちの方は一度、印刷プレビューでどのように見えるかチェックしてみるとよいかもしれません。
 加えてヘッダの直後やテーブル組みの途中での改ページを制御すれば完璧でしょう。このサイトでもテーブルの途中で改ページされたりする記事があるので後で対応しようと思います。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:MovableType で外部の RSS などを取得・整形して表示する

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

寄せられたコメント (全 3 件中、最新 5 件まで表示しています)

Posted by
困ったさん困ったさん
at
2011/04/29 10:09
ID
O6m5qA62
印刷ボタンの設置について、分かれば教えてください。
ブログに掲載した画像のみを設置した印刷ボタンで印刷することは可能でしょうか?
いろいろ調べて、このページ(http://www.nextftp.com/laputa/imgprint.html)を参考に下記のようなソースを作ってみましたが、できません・・・。
<img src="掲載する画像のURL"><br><br>
<input type="button" onclick="newopen('印刷したい画像のURL')" value="↑ print ">
Posted by
ぴろり ◆OLEEi.VOX.ぴろり ◆OLEEi.VOX.
at
2008/12/18 22:35
ID
M88UgPi2
こんにちは。
指定した任意のIFRAME内のページだけを印刷,というのは現状では無理ではないかと思います。
もしかすると何か方法があるのかもしれませんが私も知りません。
Posted by
修行者修行者
at
2008/12/16 10:33
ID
KU32IYcU
こんにちは、はじめまして
勉強中のものです。
TOPページにINFRAMEで表示している別ページのみ印刷できるように
したいのですが、勉強不足でわかりません。
ご教授頂けると助かります。
どうぞよろしくお願い致します。

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。