業務管理系のWEBアプリでレポートの出力を作るとします。レポートは印刷することが前提です。

その場合、何を使ってレイアウトの調整をするのでしょうか?

表示内容は以下です。

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

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

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

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

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

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

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2007/08/15 10:10:04
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答3件)

id:GEN111 No.1

回答回数472ベストアンサー獲得回数58

ポイント27pt

 改ページの位置はスタイルシートの 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>
id:dingding

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

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

とても参考になります。

2007/08/09 00:51:42
id:KazyN No.2

回答回数352ベストアンサー獲得回数32

ポイント27pt

その 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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません