2013-12-10 2 views
6

A4サイズのレポートをHTMLで作成する必要があります。ヘッダーとフッターが必要です。確かにこれはCSSのええで行うことができますか?私はHTMLでレポートを作成する必要があります。これはA4サイズです。どうすればいいですか?

誰にもこれに関するサンプルまたはサンプルコードがありますか?

ので、基本的には、印刷目的のために、生成されたHTMLをPDFドキュメントに変換されますです

..私はGoogleで検索し、コードスニペットは、私はメディアクエリに関するすべての話を持って、彼らは動作しません。 MVC4を使用していて、ビューをPDFに変換するツールが見つかりました。ビューは単なる純粋なHTMLです。ですから、出力レポートを表すようにHTMLを書式化してPDFを作成するのはなぜかと思いました。

だから私は、私は次のコードを使用してみましたが、それは思われないヘッダを持っている能力、およびフッタ(ページの一番下)を必要とし、それらの両方

の途中で内容

<html> 
<head> 
    <style type="text/css" media="all"> 
     @page { 
      size: A4 portrait; /* can use also 'landscape' for orientation */ 
      margin: 1.0in; 
      border: thin solid black; 
      padding: 1em; 

      @bottom-center { 
       content: element(footer); 
      } 

      @top-center { 
       content: element(header); 
      } 
     } 

     #page-header { 
      display: block; 
      position: running(header); 
     } 

     #page-footer { 
      display: block; 
      position: running(footer); 
     } 

     .page-number:before { 
      content: counter(page); 
     } 

     .page-count:before { 
      content: counter(pages); 
     } 
    </style> 
</head> 

<body> 
    <div id="page-header"> 
     <p>Header text</p> 
    </div> 

    <div id="page-footer"> 
     <p>Footer text</p> 
     <p>Page <span class="page-number"/> of <span class="page-count"/></p> 
    </div> 

    <div id="page-content"> 
     <p>Page 1.</p> 

     <p style="page-break-after:always;"/> 

     <p>Page 2.</p> 
    </div> 
</body> 
</html> 
+0

になります願っています。それはまさに彼らのために設計されたものではありませんか? '@media print'では、印刷時のページの見た目を正確に定義することができます。しかし...私はこれのようなことを試みたことはないので、それはちょうど最初の考えのようなものです... – Charlie74

+0

どのような例?私はhttp://www.fanuriotimetracking.com/files/releases/2.7/help/html/template-guide-html.htmlを使って試しました。サンプルページに行きます。 – user2206329

+0

'#a4 {width:8.27in;高さ:11.69インチ; } ' – mdesdev

答えて

2

CSSを使用すると、幅と高さを実際のサイズに設定できます。例えば、あなたのprint.cssファイルの中で:

div.A4 { 
    width: 21 cm; 
    height: 29.7 cm; 
    margin: 0; 
} 

しかし、HTML/CSSは本当にこの目的のためのものではありません。これを処理するにはメディアクエリが本当に最適な方法です。私は実際にそれらを働かせようとする少し時間を置くことをお勧めします;このウェブサイトを複数回使用する予定がある場合は、時間がかかります。

+1

@ user2206329印刷に必要な場合はcssを使用して用紙フォーマットの寸法をハードコードしないことをお勧めします。 – Leo

+0

用紙フォーマットを変更したり、向き(横向き、縦向き) OPは特にメディアの問い合わせを望んでいないので、私はそれを行う別の方法を提供するだろうと思った。しかし、はい、メディアのクエリははるかに、はるかに好ましいです。 – AaronB

+0

私はメディアクエリーを望まないとは言わなかった。私が使ったメディアクエリーはうまくいかないと言った。誰かが何らかのメディアクエリーを持っていれば、それを使って幸せになります。 – user2206329

1

なぜA4サイズですか?印刷目的のために? 印刷目的の場合は、それを心配する必要はありません。その目的のためにCSSを使用してください。 html要素がブロック要素(デフォルト)として表示されていて、幅や高さを指定していない場合は、印刷しようとするとhtml文書がプリンタ設定文書にサイズ変更されます。 印刷のCSS設定を調整する必要がある場合は、css media queries

この回答は印刷に関連していない場合は無視してください。

はそれが私は正直にメディアクエリが進むべき道だと思う感覚

レオ

+0

更新された質問 – user2206329

+0

このPDFコンバータツールは、印刷および用紙フォーマットを処理できますか?どんなツールですか?私はMVCとASP.NEtのための他のPDFコンバータを使用しており、彼らは通常、素敵なOOファッションでこのようなものを処理します。 – Leo

+0

私はhttps://github.com/webgio/Rotativaを使用しています – user2206329

関連する問題