11

各ページに印刷するヘッダーを取得できますが、余白を印刷するのは初めてです。@page cssは機能すると思いましたが、ページの余白には影響しないようです。本文に余白を設定すると、1ページ目で機能しますが、後続のページではデフォルトで上余白が始まり、テキストの上にヘッダーが配置されます。

<style>  
.header {  
 position: fixed;  
 top: 0;  
}  
@page {  
 size: 11in 17in;  
 margin-left: 1in;  
 margin-right: 1in;  
 margin-top: 1in;  
 margin-bottom: 1in;  
} 
</style>

<body>  
<span class=header>This is the header</span>  
This is the text of the document. (repeat until I get to page 2)  
</body>
4

2 に答える 2

9

すべてのブラウザによる印刷サポートは、多くの一般的なブラウザに何年も修正されていない恐ろしいバグがあり、サポートが非常に不十分です。

簡単な答えは、特定のレイアウトを確保する必要がある場合は、HTML/CSS の印刷を避けることです。オンデマンドで動的に生成される可能性のある PDF を使用します。iTextSharp など、さまざまな PDF ジェネレーター API があります。Flash から印刷することは可能ですが、Flash がインストールされ動作している場合 (つまり、Flashblock がなく、iOS) に限られます。

HTML/CSS 印刷は単純なレイアウトに制限する必要があります。フォームの印刷は悪夢であり、fieldsetサポートlegendが特に問題になります (特に Firefox で)。興味深いことに、印刷サポートは Internet Explorer で最適です。

CSS3 印刷サポート仕様は完成しておらず、しばらくお休みです。

一般原理：

  • 背景や背景の CSS 画像はサポートされていません (既定では、ユーザーはイントラネット アプリケーションのブラウザー設定を変更できます)。前景イメージのみが印刷されます。

  • ページのサイズは世界中で異なるため、幅は流動的である必要があります。US Letter 形式は、A4 レイアウトよりも短く幅が広い

  • すべてのブラウザは、さまざまな方法で印刷をサポートしています。バグはたくさんあります。

  • 印刷プレビューを使用してテストします。

于 2010-12-29T07:13:41.733 に答える
1

現在4年半前の受け入れられた答えは次のように述べています：

「簡単な答えは、特定のレイアウトを確保する必要がある場合は、HTML/CSS の印刷を避けることです。」

最近では、ブラウザーで比較的単純なレイアウトの HTML/CSS 印刷を行ったり、ツールのようなツールを使用するとwkhtmltopdf、より複雑なレイアウトを作成したりできます。http://www.toccon.com/toc2013/public/schedule/detail/26714も参照してください。

于 2015-07-28T09:33:38.290 に答える