クラシックなテキストヘッダー & フッターを追加

import {PdfDocument, AffixFonts} from "@ironsoftware/ironpdf";

(async () => {
    // Configure render options
    const options = {
        firstPageNumber: 1, // Use 2 if a cover page will be appended

        // Add a header to every page
        textHeader: {
            dividerLine: true,
            centerText: "{html-title}",
            font: AffixFonts.Helvetica, // Use the font name or font file path
            fontSize: 12,
        },

        // Add a footer
        textFooter: {
            dividerLine: true,
            leftText: "{date} {time}",
            rightText: "{page} of {total-pages}",
            font: AffixFonts.Arial, // Use the font name or font file path
            fontSize: 10,
        },
        // Mergeable fields are: {page} {total-pages} {url} {date} {time} {html-title} & {pdf-title}

        margin: {
            top: 25, // Create 25mm space for the header
            bottom: 25, // Create 25mm space for the footer
        },
    };

    // Define HTML content
    const htmlContent = "<h1>Hello IronPDF</h1>";

    // Render HTML content to a PDF with headers and footers
    const pdf = await PdfDocument.fromHtml(htmlContent, {renderOptions: options });

    // Save the PDF with headers and footers
    await pdf.saveAs("header_footer.pdf");
})();

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

クラシックなテキストヘッダー & フッターを追加

HTMLコンテンツをレンダリングする際に、PDFドキュメントにテキストヘッダーとフッターを追加する方法を学びます。

テキストヘッダーとフッターを含めるには、レンダリングオプションオブジェクトで指定する必要があります。仕切り線、HTMLタイトルを表示する中央のテキスト、フォント設定、フォントサイズを含むヘッダーコンテンツを定義します。同様に、textFooter プロパティを使ってフッターを定義します。 {html-title}、および {pdf-title} などのフィールドを使用してコンテンツをパーソナライズできます。

ヘッダーとフッターが適切に収まるようにマージンをカスタマイズします。

HTMLコンテンツをPDFに変換するために PdfDocument.fromHtml メソッドを利用します。オプションとして renderOptions オブジェクトを渡します。

HTMLからPDFを作成する詳細なドキュメントは、IronPDF Documentationを訪問してください。

ヘッダーとフッターを含む最終的なPDFドキュメントは、"header_footer.pdf"という名前で保存されます。

ヘッダーとフッターのサンプルコードを GitHub で調べる

GitHubで見る