印刷プレビューCSS、ただしブラウザ内

Question

TLDR;開発ツールを使用せずに、ブラウザに印刷CSSを表示する必要があります。

これは奇妙なものですが、私はストローで握っています。

システム全体を説明しようとせずに、Webベースのテキスト編集用のメカニズムがあり、それをテンプレートに入れて、HTML2PDF操作でPDFでレンダリングします。各ページに静的ヘッダーやフッターのような要件がありますが、ページ間のテキストの流れなどがあります。

私は、出力がどのように表示されるかのライブプレビューを見ることができるようにする必要がありますそれがPDFの場合は、それぞれの変更に対してPDFを再レンダリングし続けるだけではありません。私は実際には、印刷CSSを使用する「印刷プレビュー」を、メインのブラウザウィンドウやiframe内で、通常の印刷プレビューではなく、chrome/firefoxからのWebツールを使用せずに表示できるようにしたいと考えています。

ブラウザにプリントCSSでレンダリングするよう指示することはありますか？それとも、それをシミュレートするJSライブラリが見つかりませんか？

Answer 1

ここでは、スタックオーバーフロージョブの採用情報プロファイル機能での適用について説明したものと同様のものを作成しました。いくつかのHTMLにいくつかのCSSを適用するよりもはるかに難しい作業です。

私はこのpdfが多分複数のページであり、基本的にすべての印刷プレビューの印刷プレビュー機能のような個々のページを表示したいと考えています。

使用しているHTML2PDFコンバーターは、ページの高さと幅をピクセル単位で定義します（実際に何かを調べる必要があります）。一般に、ページの埋め込みもピクセル単位で確認できます。これを使用すると、あなたのhtmlの中に単一のページラッパーを作成して、いくつかのCSSを使ってパディングとマッチさせることができます。

<div class="pdf-page"></div> 

あなたがそこにpdfで望むhtmlのすべての内容をダンプします。

これで、PDFの実際の内容がピクセル単位でどのくらい大きいかを調べるだけで済みます。これを行う最も簡単な方法は、実際にはブラウザのコンテナにドロップしてから、javascriptを使用してコンテナの高さを計算することです。実際に画面に表示することなくこれを行うことは可能ですが、計算された値は現在のブラウザのグラフィックスエンジンに基づいており、必ずしもHTML2PDFコンバータで使用されるものではありません。一貫性のある問題が発生した場合は、ブラウザのページごとの計算に少し余計な部分を追加することで問題を解決できますが、これはこの範囲を超えています。

文書全体の高さが1ページであれば、必要なページ数を把握し、上からすべてのHTMLコンテンツをプレビューページに何度もコピーしてpdf-page全体をコピーできます。次に、各ページについて、コンテンツをスクロールするために負のマージンを設定します。最初のページでは-0、2番目のページでは-1 * pageHeightInPixels、3番目のページは-2 * pageHeightInPixelsなどとなります。あなたの文書が短ければ、これはうまくいきます。長すぎると、これは失敗するでしょう。

これで、好きなようにスタイルを設定できます。私はこれをしたとき

---

、それを達成するための任意の新しい方法を見ていない、7年前のようなものだったが、我々は以来、私たちは、PDFのプレビューは、実際に本物のPDFを生成するために行う方法を変更しました。