4

過去 1 時間ほど Web をひっくり返してきましたが、レンダリングの問題の解決策が見つからないようです。

Rotativa (1.6.4) を PDF 作成ライブラリとして使用しています。これは、私が投げた HTML をほぼ 100% の精度で再現することができました。なぜほとんど; グラフがページに収まらず、次のページに転送する必要がある場合、PDF に変換しているグラフが問題を引き起こすようです。詳細については、スクリーンショットを確認してください。

壊れた PDF

スクリーンショットからわかるように、1 つのグラフが重なっていますが、これは私には不明な理由で発生しています。

提案されたページ ブレーカーを追加しようとしましたが、何の助けもありませんでした。

.page-breaker {
  display: block;
  clear: both;
  page-break-after: always;
 }

チャートのラッパーには、次の CSS ルールがあります。

.chartContainer {
  float: left;
  clear: both;
  width: 100%;
  height: 350px;
  margin: 20px auto;
  page-break-before: always;
  page-break-after: always;
}

Rotativa で生成された PDF が正しく表示されないだけでなく、Chrome での印刷プレビューでも同じことが起こります。したがって、問題は明らかに改ページと CSS の間のどこかにありますが、解決策はまだあります。

どんな助けでも大歓迎です。

4

2 に答える 2

7

Forget about adding page-break-before or page-break-after. The solution is to add page-break-inside: avoid !important rule. Rule should be added to the container/wrapper of the elements that could get broken in page break.

于 2015-06-25T15:24:15.240 に答える
0

何を試しても、うまくいきませんでした。ページの css に含まれていることがわかりました

body{ 表示: -webkit-box; }

この行にコメントすると、page-break-* が機能し始めます。

于 2021-07-08T09:51:11.697 に答える