2012-12-26 4 views
7

htmlの請求書が画面に表示されます。私はあらかじめフォーマットされた紙にそれを印刷したい。CSSを使用して事前書式設定された用紙に請求書を印刷する

フッター(ページの底部から一定の高さ) - 紙3つのセクション

ヘッダ(ページの先頭から一定の高さ)

ボディ(N行のテーブルが1で構成される)を有しています

私はCSSを使用して#InvFooterを使用してdiv要素とCSSを作成しようとした

<link rel="stylesheet" href="print.css" type="text/css" media="print" /> 
@page { size:8.5in 11in; margin: 2cm } 


#InvFooter {position:absolute;left:50px;bottom:0px;} 

私は理解できない2つの問題があります。

  1. 印刷ページの下部にフッターを固定する方法。
  2. 本文にページの固定セクションを限定し、テーブルの行が多すぎる場合は、別のページにオーバーフローさせる方法。
+0

"事前フォーマット用紙"とはどういう意味ですか?物理的な用紙はすでに部分的に印刷されていますか? – Jonatan

+1

はい。請求書バックグラウンドの色要素はすべて、ミシン目と共に事前に印刷されています。 –

+1

ああ、そうです。私はあなたがCSSでこれを完璧にするのは難しいことだと思います。私は、PDFの行に沿って何かを使うことをお勧めします。 CSSとHTMLはブラウザがあなたの文書をどのように表示するかのガイドラインとしては本当に適しています。 – Jonatan

答えて

2

簡単な答え:html/cssは決して印刷するつもりはありません。あなたの現在のプリンタに合うように絶対サイズを「ハックアップ」することができても、次の(または顧客の)フィットになるという保証はありません。

この理由から、印刷されたフォーマット(高可搬性を期待する)を期待するために、PDFが発明されました。

PDFを使用することにより、固定(用紙)サイズが保証されます。

無料のpdfソリューション(オープンソース)だけでなく、商用ソリューション(例:Dynamic PDFなど)を見つけることができます。 Adobe製品の依存関係のないサーバーベースのアプリケーションから

+0

ありがとう、この場合、事前印刷されたフォームは、請求書。もしユーザーが自己請求し、そこにそれ自身の請求書を印刷すればフォームはあらかじめ印刷されていないので、すべてが機能します。 PDFソリューションはプログラム的に機能しますか(つまり、私はDIV –

+0

はい、それはプログラマティックです。そして、請求書などの設定が非常に簡単です。私はこれをより複雑なものに使用しました。結果ファイルは通常、画像などが埋め込まれていない限り – K3N

+0

私のサーバenvはperl、python、PHPなどでFreeBSD上のApacheです。私は解決策が必要です.net –

0

これは私が遭遇したCSS印刷技術のベストコンパイルです。それは、W3標準、優れた例、サードパーティ推奨のHTML - > PDFソフトウェア、および16の異なるページマージンセレクタを視覚化する便利なJPEGへの深いリンクを持っています。それは私を始めました。そして今、私は100以上の長さのプロジェクトの要約を印刷して、エグゼクティブのレビューをもたらすことができます。

  1. 記事: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

  2. ハンディダンディページマージンJPEG: https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg

  3. デモHTMLブック: https://github.com/rachelandrew/css-for-print/blob/master/book.html

  4. デモ印刷用CSS: https://github.com/rachelandrew/css-for-print/blob/master/pdf-styles.css

EDIT これらはあなたが探しているものかもしれません:

.invoice { 
    page-break-before: always; 
} 

.invoice h1.title { 
    page-break-after: avoid; 
} 

.invoice .line-item { 
    page-break-inside: avoid; 
    page-break-after: auto; 
} 

EDIT紙は、複数ページの請求書に対応フォーマットしない方法 ?すべての請求書を個別に印刷する必要があります...

関連する問題