25

真に絶対配置された要素を含む HTML ページを紙に印刷することは可能ですか? すべてのブラウザがここで大きな混乱を起こしているようです。絶対単位 (cm など) でボディを定義し、要素をposition: absolute内側に配置するのは簡単です。ただし、すべてのブラウザは、そのようなページを印刷できないようにしようとしているようです。たとえば、FF は、マージン 0 のページ設定にもかかわらず、Linux で PDF に印刷する場合でも、印刷マージンを追加しています。Chrome はどのような場合でもページを縮小するようです。したがって、絶対位置で何かを印刷する方法、たとえば。紙のフォームフィールド、マーキングなど? 私は何かを見落としましたか？

4

7 に答える 7

29

残念ながら、CSS3 Module: Paged Mediaを使用すると、これらすべてが可能になります。大きすぎるページに関するルールは次のとおりです。

3.3.3. ページ シートに収まらないページ ボックスのレンダリング

ページ ボックスがターゲット ページ シートの寸法と一致しない場合、ユーザー エージェントは次のことを (優先順に) 選択することができます。

  • より大きなページ シートに示されたサイズでページ ボックスをレンダリングします。
  • ページ ボックスがページ シートに収まる場合は、ページ ボックスを 90° 回転します。
  • ページ ボックスをページ シートに合わせて拡大縮小します。(スケーリング時にページまたはページ上の要素のアスペクト比を維持する必要はありませんが、アスペクト比の維持が推奨されます。) [Chrome で実行]
  • 他のページ シートへの「こぼれ」を含め、ページ コンテンツを再フォーマットします。[他の多くのブラウザや古いブラウザで行われている]
  • オーバーフローしたコンテンツをクリップします (最も好ましくありません)。

ユーザー エージェントは、これらの操作を実行する前にユーザーに相談する必要があります。

3.3.4. ページ ボックスをシートに配置する

ページ ボックスがページ サイズよりも小さい場合、ユーザー エージェントはページ ボックスを用紙の中央に配置する必要があります。

positionそして、これはあなたのすべてのedのものを壊すルールです:

3.7. ページボックス外のコンテンツ

[...] また、ボックスを絶対的に配置すると、「不便な」場所に配置される場合があります。たとえば、画像はページ ボックスの端に配置できます。同様に、ボックスが固定または相対配置を使用する場合、ページ ボックスの外側に配置される場合もあります。

このような要素の正確なフォーマットの仕様は、このドキュメントの範囲外です。ただし、著者とユーザー エージェントは、ページ ボックスの外側のコンテンツに関して次の一般原則に従うことをお勧めします。

  • ユーザー エージェントは、要素の配置を尊重するために、多数の空のページ ボックスを生成することを避ける必要があります (たとえば、100 の空白ページを印刷したくない場合)。ただし、'page-break-before' と 'page-break-after' の 'left' と 'right' の値を尊重するために、少数の空のページ ボックスを生成することが必要な場合があることに注意してください。
  • 作成者は、レンダリングを避けるためだけに、不便な場所に要素を配置すべきではありません。その代わり：
    • ボックスの生成を完全に抑制するには、'display' プロパティを 'none' に設定します。
    • ボックスを非表示にするには、'visibility' プロパティを設定します。
  • ユーザー エージェントは、ページ ボックスの外側に配置されたボックスを、それらを破棄したり、ドキュメントの最後にページ ボックスを作成したりするなど、いくつかの方法で処理してもよい (MAY)。

セクション 3.7 の 2 番目の段落を見てください。このような要素の正確な書式設定の仕様は、このドキュメントの範囲外です。このパラグラフに続く一般原則以外のドキュメントやガイドラインは存在しないため、すべてのブラウザは好きなことを行うことができます。

これは、現在この CSS3 モジュールにある欠陥の 1 つです。しかし、これらの欠陥は CSS4 または改訂版の CSS3 モジュールでは取り除くことができないと思います。考えられるスタイルシートと結果として生じるレイアウトの種類が多すぎてカバーしきれないからです。CSS Print Profile に記載されている小さな脚注にも注意してください。

‡ プリンタは、通常のフローで現在の要素の位置の前にページに配置された配置要素を無視する場合があります。

したがって、すべてのブラウザで同じ効果を生み出すことは基本的に不可能です。当分の間、ポータブル ドキュメントを実現する唯一の方法は、サード パーティのアプリケーションを使用するか、PDF プリンターとお気に入りのブラウザーを使用して PDF を作成することです。W3C の推奨事項が厳密でないか、ブラウザー ベンダーが必要に応じて実装している限り、他のすべての方法は失敗します。

以下も参照してください。

その他の注意事項

position:absolute印刷する必要がある要素がたくさんある場合、要素を実際に絶対位置に配置する必要があるかどうか、または同じ効果をわずかに異なる方法またはより簡単な方法で達成できるかどうかは、良い質問になることがあります。display:noneまた、広告、ナビゲーションなど、印刷されたメディアに本当に必要ではない各要素で使用する必要があることに注意してください...

于 2012-07-31T16:37:54.147 に答える
6

あなたが言うように、Web ブラウザーは印刷時におかしなことをする傾向があります。多くの場合、印刷指向のエンジンの方が優れています。

WeasyPrintは、 PDF にレンダリングするオープンソースエンジンであり、ページ マージンを設定するための絶対配置とCSS 3 Paged Mediaをサポートします。

@page { margin: 1cm /* or 0, if you want */ }
于 2012-07-27T12:43:16.043 に答える
4

コンテナに相対位置を持たせます。これが、すべての画面と用紙で絶対配置要素を同じ場所に保持する唯一の方法です。したがって、メインの div (すべてのコンテンツが配置されている div) の場合、css に次を追加します。

#maindivname{position:relative;}

トリックを行う必要があります。

于 2012-06-05T20:51:22.770 に答える
2

メディア クエリがうまく機能します。このリンクと前の質問を確認してください。役立つかもしれません。 印刷スタイルシートのデバッグに関する提案はありますか?

Media Query は、px をインチ/cm/印刷要件に必要なものに変換します。

あなたが言及したその境界/マージンは、おそらくプリンターの印刷可能領域（グリップエッジ）です。ほとんどのプリンターは、素材をつかんで送るために何らかの種類のエッジを必要とします。そのため、フルブリード ドキュメントを印刷すると (端までインクを塗ります)、必要以上に大きな用紙に印刷されてからトリミングされます。

于 2012-07-31T20:41:37.520 に答える
1

ページ設定で余白を設定することは、HTMLページを印刷するための最初の主要なソリューションですDIV。

結局のところ、予期しない結果が得られる場合は、HTMLページを掘り下げる必要があります。

Javaスクリプトを使用して、タイトルバーやカスタムバーのないウィンドウを作成し、すべてのオリジナルデータをそのウィンドウに入れposition:relative、メディアタイプを印刷として設定します。

position:relative;
media:print;

それが役立つことを願っています。

于 2012-07-26T13:00:13.433 に答える
0

CSS でこのプロパティを使用します。

body{
  -webkit-print-color-adjust:exact;
}

このヘルプは、絶対値と背景を表に配置します。

于 2021-07-20T13:20:13.603 に答える