2

動的データを取得し、それをHTMLに配置してレイアウトし、それをPDFに変換するシステムがあります。しかし、私が抱えている問題は、要素が残りのページスペースに対して大きくなりすぎたり、何か他のものを下から押し出したりした場合、これを検出して要素を次のページの正しい位置に移動するにはどうすればよいですか？（現在、フッター要素の邪魔になります。）

何か案は？

4

8 に答える 8

1

代わりに、データに対して2つのビューを書き込むことを検討しましたか？

これにより、PDFバージョンでのPDFの問題に対処し、HTMLバージョンでのHTMLの問題に対処できるようになります。

編集：HTML自体には「ページサイズ」の実際の概念がないため、（javascriptを介した）独自のビューポートを超えて、これは困難になります。

javascriptを使用して、特定のDOM要素の計算された高さを見つけることができます。

document.getelementById("anElement").clientheight

次に、特定のページのピクセル数がわかっている場合は、必要に応じて改行を追加して、ページが大きくなりすぎる場合はそれを押し下げることができます。

于 2009-04-20T17:03:39.600 に答える
0

ページ上のすべてのアイテムの特定の高さ（動的なものも含む）を追跡し、ページ分割を挿入する必要がある時期を判断する必要があります。

于 2009-04-20T16:42:06.500 に答える
0

あなたの質問から、すべてのコンテンツ要素に静的ポジショニング（位置：絶対）を使用すると思いますか？

コンテンツがHTMLのフッター要素を中断する場合は、通常HTMLで行われるように、すべてのコンテンツの下でHTMLにフッターをレンダリングさせることでこれを修正できる可能性があります。

それでも、HTMLをPDFに変換する方法を説明できれば非常に役立ちます。

于 2009-04-20T18:02:23.377 に答える
0

Guss：私/私たちは変換にwinoverライブラリ（wnvhtmlconvert.dll）を使用しています。位置は絶対的ではありません（ヘッダーとフッターを除く）。なぜなら、それらの上の要素が拡張する場合、それらはシャッフルする必要があるからです。要素の内容はユーザー入力によって異なるため、すべて動的である必要があります。「ページ」にある空き領域に応じて、各要素を分割または移動する必要がある場合があります。

zack：テンプレートレイアウトに使用したばかりのPDFに変換するためにHTMLを作成しています。HTMLは表示されません。

于 2009-04-22T13:00:25.677 に答える
0

フッターの絶対位置を外して、コンテンツの後に流します。

1つの大きなページとしてレンダリングすると、PDFは必要な場所でページを分割する可能性があります。

于 2009-04-22T13:12:43.260 に答える
0

生成されたhtmlを制御でき、そこでいくつかの変更を加えることができると仮定します。PDFの正確な高さと幅を経験的に決定する必要があります。また、HTMLページが埋めるPDFページの最大数を決定する必要があります。

基本的な計画は、htmlコンテンツをそれ自体を含むdivに配置し、そのdivを、入力する可能性のあるページ数に応じて繰り返すことです。次に、各divは、オーバーフローが非表示になっている状態で、1ページに収まるようにスタイルとサイズが設定されます（各divは「ウィンドウ」と見なすことができます）。繰り返しのdivは、コンテンツの別の部分がウィンドウに表示されるようにコンテンツをシフトします。次の例では、PDFページのサイズが500px x 500pxであり（これは非現実的です）、コンテンツが占める最大ページ数は3であり、HTMLはPDFによってレンダリングされていると想定します。標準に準拠した方法でコンバーター。

<!DOCTYPE html>
<html>
<head>
  <title>PDF Pagination Example</title>
  <style>
    .header {background:blue; height:25px}
    .footer {background:green; height:25px}
    .window {height:500px; width:500px}
    #window1, #window2, #window3 {height:450px; overflow:hidden}
    #spacer2 {height:0; margin-top:-450px}
    #spacer3 {height:0; margin-top:-900px}
    li {font-size:30px; padding:10px}
  </style>
</head>
<body>

<div class='window'>
<div class='header'>A header</div>
  <div id='window1'>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
  </div>
<div class='footer'>A footer</div>
</div>

<div class='window'>
<div class='header'>A header</div>
  <div id='window2'>
  <div id='spacer2'></div>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
  </div>
<div class='footer'>A footer</div>
</div>

<div class='window'>
<div class='header'>A header</div>
  <div id='window3'>
  <div id='spacer3'></div>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
</div>
<div class='footer'>A footer</div>
</div>

</body>
</html>

30pxのフォントサイズでは、コンテンツは2ページに分割されます。フォントサイズを50pxに増やすと、コンテンツは3つすべてに広がるように広がります。

パズルの最後のピースは少しjavascriptです。例のようにカットオフが発生しないように、コンテンツの高さを計算し、各ウィンドウの下部にパディングを追加するスニペットを作成する必要があります。javascriptは、コンテンツのないウィンドウをdisplay：noneに設定する必要もあります。これがあなたが探しているcssであるかどうかはわかりませんので、JavaScriptを作成しませんが、ヘルプが必要な場合は、ここSOで見つけることができると確信しています:)。

于 2009-04-24T04:23:45.310 に答える
0

CSSの印刷属性のいくつかを検討するのに役立つかもしれませんが、それ以上の情報がなければわかりにくいです

http://www.w3schools.com/Css/css_ref_print.asp

于 2009-04-28T13:44:34.510 に答える
0

WebBrowserコントロールを使用し、問題の要素のOffsetRectangle.Bottomプロパティを確認することで、フッターの上部よりも低いかどうか、要素がオーバーフローしたかどうか、およびその量を確認できることがわかりました。

とにかくみんなとギャルのあなたの助けをありがとう。

于 2009-05-19T16:15:23.830 に答える