javascriptでページ内の一部分だけを印刷する設定

解決済

質問者：niconico_1969
質問日時：2006/01/26 15:15
回答数：3件

ページを印刷するjavascriptを調べたところ、

<a href="javascript:window.print();">
印刷する</a>

というのが最も多く出てきました。
今回、ページ内のクーポンの部分だけを印刷する、
という設定にしたいのですが、その場合の記述方法を教えてください。

また上記の場合、<script>～</script>　で
javascript自体の指令は必要ないんでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1ベストアンサー

回答者： Response_W
回答日時：2006/01/26 15:44

HTML上の印刷する部分を限定したいということですが、

こんな感じでどうでしょうか？

スタイルシートの設定のしかたで、ある程度近いことができると思います。
IE6ではこれで動いています。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title></title>
<style media=screen>

</style>
<style media=print>

</style>
</head>
<body>

<div class="dspOnly">テスト</div><br>

<img src="test1.jpg" border="0" class="prtOnly"><br>

<img src="test2.jpg" border="0" class="">
<br>
<br>
<a href="javascript:window.print();" class="dspOnly">
印刷する</a>

</body>
</html>

＞また上記の場合、<script>～</script>　で
＞ javascript自体の指令は必要ないんでしょうか。

javascript:window.print()←自体がJavaScriptの命令になって
いますので特に必要ありません。

※さらに複雑さ処理がやりたい場合は別ですが。

この回答への補足

cssで制御できるんですね。すごい…。
ちなみにmedia=screen　media=print　というのは
style専用の属性なんでしょうか？
また、今回のような印刷したいとき専用の属性なんでしょうか？

それで、今htmlに組み込んでみましたが
あまり意味がわかっていないせいか、動作しませんでした。
確認したいのですが、
たとえば、ページ全体のうちの、
ある一つの表のみを印刷できるようにしたい場合、
その表には、何もclass指定はせず、
それ以外のすべてのタグに（又はdivで囲んで）class="dspOnly"を指定するってことで
解釈は合っているでしょうか？

それと、style指定は、外部ファイルに入れる場合、
.prtOnly {display:none;}
.dspOnly {display:none;}
だけでよいんでしょうか。
それとも、media-screen　を指定するべく、
classを１つ１つ<style></style>タグで囲むことが
必要なんでしょうか。

わかりにくい文章になってしまいましたが、、
よろしくお願いします。

補足日時：2006/01/26 17:05

通報する

- 0
- 件

通報する

No.2

回答者： Response_W
回答日時：2006/01/26 18:26

＃1です。

お察しの通り、「media」の「screen」 or 「print」指定ですが、
スタイルシートの有効な場面が決定されます。
「screen」を付ければ画面表示時に有効。
「print」を付ければ印刷時に有効。
といった具合です。

＞ style専用の属性なんでしょうか？
スタイル用の固有属性だと思います。
「http://www.tohoho-web.com/html/style.htm」

＞ある一つの表のみを印刷できるようにしたい場合、
＞その表には、何もclass指定はせず、
＞それ以外のすべてのタグに（又はdivで囲んで）class="dspOnly"を指定するってことで
＞解釈は合っているでしょうか？
その考え方で合っていると思います。

style指定は、外部ファイルに入れる場合ですが、
別けないと駄目なようなきがします。

<link href="style1.css" type="text/css" media=screen>
<link href="style2.css" type="text/css" media=print>

【style1.css】

.prtOnly {display:none;}

「screen」指定のスタイルシートでは「prtOnly」のクラスを非表示としています。

【style2.css】

.dspOnly {display:none;}

「print」指定のスタイルシートでは「dspOnly」のクラスを非表示としています。

説明があまり上手じゃなく申し訳ないですが、
わからないことがあれば、また質問をお願いします。

頑張ってみてください！

この回答への補足

ありがとうございます。

どうしても外部ファイルにしたいわけではないので、先日の記述をヘッドタグ内に埋め込むことにします。

ただ、印刷時に必要な表以外の部分にclass="dspOnly"
を入れる方法なのですが、

印刷したい表が、大きな囲いとなるtableの中の、
tdの一つの中にあるtableであった場合、
どうやって指定したらいいんでしょう。
divでもspanでも、半端な位置になってしまいます。

補足日時：2006/02/01 14:54

通報する

- 0
- 件

通報する

No.3

回答者： Response_W
回答日時：2006/02/02 13:05

度々失礼します。

＞印刷したい表が、大きな囲いとなるtableの中の、
＞ tdの一つの中にあるtableであった場合、
＞どうやって指定したらいいんでしょう。
＞ divでもspanでも、半端な位置になってしまいます。

ご希望に沿うかわかりませんが、
その印刷用の内側のテーブルを外にもう一つ作成して
印刷時のみの設定にして（普段は非常時）おくのが
簡単な方法だと思います。