html2pdfページブレイクをC#で修正（開発者向けチュートリアル）

IronPDF: The C# PDF Library

IronPDFは柔軟で使いやすく、高度にカスタマイズ可能なC# PDFライブラリであり、開発者、初心者、またはベテランがPDFを完全に操作して編集することを可能にします。 HTML、RTF、画像などの異なる形式をPDFに変換し、PDFに変換するときのレンダリング方法をさらに編集するための多くの方法を提供します。 さらに、IronPDFはChromeレンダリングエンジンを使用しているため、HTML文字列のレンダリングに非常に優れており、CSSスタイリングをさらに使用してHTMLドキュメントをカスタマイズでき、他にはないカスタマイズとビジュアルプレゼンテーションの面で開発者に優位性を与えます。

ライブラリがChromeレンダリングエンジンを使用しているため、HTMLのレンダリング時には見たままの結果が得られ、このためテンプレートの不一致を避けるためにページブレーク用のテンプレートを作成するなどの操作に理想的です。 PDFに変換するときには、正確にデザインしたテンプレートになります。

Adding Page Break on PDF

ライブラリの柔軟性と使いやすさを示すために、プログラムでページブレークを追加する方法を示したコード例を使用します。

このシナリオでは、入力としてテーブルベースのPDFを使用し、視覚的な明確さを得るためにページブレークを即座に追加する前後の違いを見ます。

// Replace the license key variable with the trial key you obtained
IronPdf.License.LicenseKey = "REPLACE-WITH-YOUR-KEY";

// Replace the license key variable with the trial key you obtained
IronPdf.License.LicenseKey = "REPLACE-WITH-YOUR-KEY";

' Replace the license key variable with the trial key you obtained
IronPdf.License.LicenseKey = "REPLACE-WITH-YOUR-KEY"

using IronPdf; // Import the IronPdf library

// Define the HTML content, including a table and an image
const string html = @"
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>
  <div style='page-break-after: always;'> </div> <!-- Ensures a page break after the table -->
  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";

// Create an instance of ChromePdfRenderer
var renderer = new ChromePdfRenderer();

// Render the HTML content into a PDF
var pdf = renderer.RenderHtmlAsPdf(html);

// Save the PDF as "Page_Break.pdf"
pdf.SaveAs("Page_Break.pdf");

using IronPdf; // Import the IronPdf library

// Define the HTML content, including a table and an image
const string html = @"
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>
  <div style='page-break-after: always;'> </div> <!-- Ensures a page break after the table -->
  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";

// Create an instance of ChromePdfRenderer
var renderer = new ChromePdfRenderer();

// Render the HTML content into a PDF
var pdf = renderer.RenderHtmlAsPdf(html);

// Save the PDF as "Page_Break.pdf"
pdf.SaveAs("Page_Break.pdf");

Imports IronPdf ' Import the IronPdf library

' Define the HTML content, including a table and an image
Private Const html As String = "
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>
  <div style='page-break-after: always;'> </div> <!-- Ensures a page break after the table -->
  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>"

' Create an instance of ChromePdfRenderer
Private renderer = New ChromePdfRenderer()

' Render the HTML content into a PDF
Private pdf = renderer.RenderHtmlAsPdf(html)

' Save the PDF as "Page_Break.pdf"
pdf.SaveAs("Page_Break.pdf")

Controlling Page Breaks with CSS

IronPDFはChromeレンダリングエンジンを使用しているため、CSSでカスタマイズ可能で、特定の要素にページブレークを追加したり、内部にページブレークを追加したり、その中にページブレークがないよう指定することができます。

例えば、上記の画像ではテーブルの後にページブレークが発生していますが、時にはテーブル内で乱雑に発生することがあります。

それを避けるために、ノードに特定のCSSスタイリングを使用し、内部にページブレークを追加したくないことを指定することができます。

<div style='page-break-inside: avoid'>
 <img src='no-break-me.png'>
</div>

<div style='page-break-inside: avoid'>
 <img src='no-break-me.png'>
</div>

page-break-inside: avoidを追加することで、要素内でのページブレークを防ぎます。 ただし、この操作を行う際には、要素の親divノードにこれを適用することを確認してください。

要素にページブレークビフォアスタイルを追加する場合も、同様の操作を行うことができます。

<div style="page-break-inside: avoid;">
    <img src="no-break-me.png">
</div>

<div style="page-break-inside: avoid;">
    <img src="no-break-me.png">
</div>

HTMLを利用することで、JavaScriptのdocument.getElementByIdを使用してIDで要素を選択し、HTMLノードツリーを詳細に指定し、各ノードを完全にカスタマイズできるようにすることができます。

Optimizing Image Quality and File Size

ページブレークの設定は画像の品質にも密接に関連しています。 ページブレークの設定が次のページで画像の質を縮小したりスケーリングしたりしないようにしたいです。

そのため、CSSを使用して、テンプレート全体で画像の品質が一貫していることを確認できるようにします。

<div class="no-break">
    <img src="optimized-image.jpg" alt="Optimized Image" style="width:100%; height:auto;">
</div>

<div class="no-break">
    <img src="optimized-image.jpg" alt="Optimized Image" style="width:100%; height:auto;">
</div>

上記のCSSスタイリングにより、ページブレーク操作の後でも画像が一貫していることを保証します。 最初にページの幅を100％に設定し、高さはアスペクト比を維持するために自動スケーリングされる可能性があります。

さらに、IronPDFにはHTMLを扱う際に追加のレンダリングオプションがあり、ユーザーの印刷設定に類似したダウンロード可能な印刷可能PDFのプロンプトのリストが含まれています。属性の完全なリストについては、APIドキュメントを参照してください。

Counterpart using JavaScript

IronPDFはChromeレンダリングエンジンを使用する利点があり、さまざまなバックグラウンドを持つ開発者がこの強力なライブラリを活用できるNode.jsバージョンも提供します。

Node.js版では、プロミスベースの使用およびメソッド、デバッグや進捗追跡用のonRejectedプロミスメソッドやその中間関数の使用などにより、ページブレークの追加にさらに微細な制御ができます。

html2pdfのjsPDFオブジェクトの出力メソッドのような一般的なライブラリと比較して、IronPDFはより柔軟であり、複数の言語をサポートし、異なる言語の専門知識を持つ開発者が同じプロジェクトで作業できるようにします。

結論

ページブレークの使い方とCSSがHTML全体に与える影響を理解することは、ユーザーにとって見栄えが良く魅力的なドキュメントを作成するために重要です。 読者が情報を過剰に流入して混乱しないように情報を区分けすることができます。 この記事全体を通じて、IronPDFが使用する強力なChromeレンダリングエンジンを活用して、テンプレートや自動化のためのページブレークテンプレートを自動的に作成し、効率性とスケーラビリティを高めると同時に、人為的なエラーのリスクを減らす方法について説明しました。

IronPDFを試してみたい開発者には、ライブラリが$799以上の無料試用を提供しています。