人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

業務管理系のWEBアプリでレポートの出力を作るとします。レポートは印刷することが前提です。
その場合、何を使ってレイアウトの調整をするのでしょうか?

表示内容は以下です。

・表紙
・ページごとにヘッダ、フッタ画像
・データベースから取得、集計したデータ一覧(HTMLのテーブルで件数は不定)
・グラフ(画像の大きさは固定)
・注意書きページ

特にHTMLのテーブルの高さが不定なので、印刷で用紙を分けていくときにどうしようか迷っています。

印刷に最適なようにページわけをしたり、共通のヘッダ、フッタを入れて印刷できるようにするためにはどうすればいいでしょうか?

HTMLで表示させると、いかができるのかが気になっています。
・ページごとのヘッダ、フッタを入れられるか?
・要素ごとに改ページできるか

なお、さまざまな環境で動作しなくてもかまいません。WinのFireFox2でのみでも結構です。

特別なサーバの必要などがないもので、フリーのものをお願いします。

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML Web WIN いもの アプリ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● GEN111
●27ポイント

改ページの位置はスタイルシートの page-break-before、page-breake-after で指定できます。

ページごとのヘッダ、フッタに関しては印刷時だけ表示する、という方法にしてみましたが、フッタはページの下部に表示させる方法を思いつきませんでしたのであまりフッタらしくありません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
 <style type="text/css">
 @media screen { /* 画面表示用スタイル */
 .p-header, .p-footer { display : none ; }
 }

 @media print { /* 印刷用スタイル */
 .pb-before { page-break-before : always ; } /* この要素の前で改ページ */
 .pb-after { page-break-after : always ; } /* この要素の後で改ページ */

 .p-header, .p-footer { font-size : 80% ; text-align : center ; }
 .p-header { margin-bottom : 2em ;}
 .p-footer { margin-top : 2em ; }
 }
 </style>
 </head>

 <body>
 <div><div class="p-header">夏目漱石</div>吾輩は猫である。<div class="p-footer">最初のページ</div></div>
 <div class="pb-before">名前はまだ無い。</div>
 <div class="pb-after">どこで生れたかとんと見当がつかぬ。<div class="p-footer">二番目のページ</div></div>
 <div>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<div class="p-footer">最後のページ</div></div>
 </body>
</html>
◎質問者からの返答

改ページの指定はできるんですね。

実際のコードまで書いていただきましてありがとうございます。

とても参考になります。


2 ● KazyN
●27ポイント

その Web アプリを何で開発してるかにもよるような気がします....


とりあえず Java なら JasperReport とか iText といった帳票ツールが有名かと思います。

http://blog.takeda-soft.jp/blog/show/139

http://aaa-www.net/~ttakabe/cgi-bin/wiki/pukiwiki.php?JasperRepo...

http://pinoki.la.coocan.jp/wiki/?Java%2FiText


3 ● minkpa
●26ポイント

http://www.odn.ne.jp/odn-cafe/makinghp/4/page1.html

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ