2010年 04月 27日
印刷用cssで悩む・・・ |
今回のWebアプリ開発案件の対象ブラウザは
IE・FireFox・Safariです。
とある画面で不要な部分を非表示にした状態を
印刷する要件があります。
印刷専用のスタイルシートを用意し、
ｊａｖａｓｃｒｉｐｔでwindow.print();を呼べばよいと
気楽に考えていました。
こんな感じに。
※print.cssではclass="noPrint"を非表示にしています。
IEは印刷範囲だけ印刷することを確認したのですが、
FireFoxではすべて表示されてしまいます。
（Safariはまだ未確認）
ググってみたら、FireFoxの印刷設定はクセがあるようです。
気楽に考えていただけにちょっと苦戦しそうです。
よかったらクリックしてください。
にほんブログ村
IE・FireFox・Safariです。
とある画面で不要な部分を非表示にした状態を
印刷する要件があります。
印刷専用のスタイルシートを用意し、
ｊａｖａｓｃｒｉｐｔでwindow.print();を呼べばよいと
気楽に考えていました。
こんな感じに。
※print.cssではclass="noPrint"を非表示にしています。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/all.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<script type="text/javascript">
function printMode() {
window.print();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="noPrint">
<input type="button" onclick="java script:printMode();return false;" />
ここは印刷対象外 <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div>
ここは印刷対象 <br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="noPrint">
ここも印刷対象外 <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</form>
</body>
</html>
IEは印刷範囲だけ印刷することを確認したのですが、
FireFoxではすべて表示されてしまいます。
（Safariはまだ未確認）
ググってみたら、FireFoxの印刷設定はクセがあるようです。
気楽に考えていただけにちょっと苦戦しそうです。
よかったらクリックしてください。
にほんブログ村
by kazenetu
| 2010-04-27 18:35
| プログラム(ASP.net)
