html2pdf中的C#頁面中斷修訂（開發者教程）

IronPDF：C# PDF 庫

C# 中 html2pdf 分頁符號已修復（開發者教學）：圖 1

IronPDF 是一個靈活、易用、高度可自訂的 C# PDF 庫，可讓開發人員、初學者或經驗豐富的開發人員完全操作和編輯 PDF。 它為開發者提供了多種方法，可以將 HTML、RTF 和圖像等不同格式轉換為 PDF，並進一步編輯轉換為 PDF 時的渲染方式。 此外，IronPDF 使用 Chrome 渲染引擎，因此在渲染 HTML 字串方面非常熟練，並且允許開發人員進一步使用CSS 樣式來自訂 HTML 文檔，從而為開發人員在自訂和視覺呈現方面提供其他任何地方都找不到的優勢。

由於該庫使用 Chrome 渲染引擎，因此在渲染 HTML 時所見即所得，這使得它非常適合創建分頁符模板等操作，從而避免模板不匹配的情況。 這完全取決於您在將範本轉換為 PDF 時的設計方式。

在 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")

使用 CSS 控制分頁符

由於 IronPDF 可以使用 CSS 進行自訂（因為它使用 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 節點樹，並確保每個節點都是完全可自訂的。

優化影像品質和檔案大小

分頁符號設定也與影像品質密切相關。 您需要確保分頁符號設定不會因縮小或縮放下一頁的影像而影響影像品質。

因此，我們可以使用 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 文件。

使用 JavaScript 的對應部分

由於IronPDF具有使用 Chrome 渲染引擎的優勢，因此它還提供了一個 Node.js 版本，讓不同背景的開發人員都能使用這個強大的函式庫。

使用 Node.js 版本，開發人員可以更精細地控制添加分頁符，因為您可以存取基於 Promise 的用法和方法，例如用於偵錯或進度追蹤的onRejected Promise 方法及其中間函數。

與html2pdf等常用函式庫及其jsPDF 物件的輸出方法相比，IronPDF 更加靈活，支援多種語言，允許具有不同語言專長的開發人員在同一個專案上工作。

結論

! C# 中 html2pdf 分頁符號已修復（開發者教學）：圖 4

了解如何使用分頁符號以及 CSS 如何影響整個 HTML，對於建立美觀且對使用者有吸引力的文件至關重要。 它允許讀者對正在閱讀的資訊進行分類，以避免資訊過載和混亂。 在本文中，我們討論如何利用 IronPDF 強大的 Chrome 渲染引擎自動建立分頁模板，從而提高模板和自動化的效率和可擴展性，並降低人為錯誤的風險。

對於想要試用 IronPDF 的開發者，該庫提供$799及以上級別的免費試用版。