CSSを使用して事前書式設定された用紙に請求書を印刷する

Question

htmlの請求書が画面に表示されます。私はあらかじめフォーマットされた紙にそれを印刷したい。

フッター（ページの底部から一定の高さ） - 紙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. 本文にページの固定セクションを限定し、テーブルの行が多すぎる場合は、別のページにオーバーフローさせる方法。

Answer 1

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

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

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

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

Answer 2

これは私が遭遇した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紙は、複数ページの請求書に対応フォーマットしない方法 ？すべての請求書を個別に印刷する必要があります...