レスポンシブ HTML から PDF へ

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

(async () => {
    const options = {
        // Choose Screen or Print CSS media
        cssMediaType: CssMediaType.Screen,
        
        // Set paper mode to automatic fit to physical paper
        fitToPaperMode: FitToPaperModes.FitToPage,
    };

    // Render an HTML file
const pdf = await PdfDocument.fromHtml("Responsive.html", {renderOptions: options});

await pdf.saveAs("pdf-from-html.pdf");
})();

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

レスポンシブ HTML から PDF へ

ビューポート設定に関しては、CSSメディアとペーパーモードがあります。

IronPDFのCSSメディアオプションでは、HTMLコンテンツをPDFドキュメントにレンダリングする際にスタイルをどのように適用するかを指定できます。このオプションの2つの値は、CSSメディアの"スクリーン"と"プリント"です：

スクリーン: CSSルールが画面上での表示を意図していることを示します。スタイルはデジタル画面用に最適化されており、通常、コンピューターモニター上で見栄えが良い色やレイアウトを含みます。
プリント: ブラウザに印刷されたドキュメント用のスタイルを適用するよう指示します。これは、HTMLコンテンツを紙などの物理媒体に印刷するときに、CSSルールが読みやすさと適切なフォーマットを保証するよう最適化されていることを意味します。

IronPDFのペーパーサイジングオプションにおけるペーパーモードオプションは、レンダリングされたコンテンツをPDFページにどのように合わせるかを決定します。このオプションにはいくつかの値があります：

ContinuousFeed: これは、連続給紙のプリンターに適したモードで、コンテンツが紙のロールに印刷されます。通常、工業環境などの専門的な印刷で使用されます。
FitToHeight: このモードでは、コンテンツはアスペクト比を維持しながら、指定された紙の高さ内に収まるようにスケーリングされます。これにより、コンテンツ全体が溢れることなく表示されることが保証されます。
FitToWidth: このモードでは、コンテンツはアスペクト比を維持しながら、指定された紙の幅内に収まるようにスケーリングされます。これにより、特定の幅の制約内にコンテンツが収まるようにしたい場合に便利です。
FitToPage: このモードでは、コンテンツはアスペクト比を維持しながら、ページ全体の高さと幅内に収まるようにスケーリングされます。これにより、コンテンツ全体が1ページに収まることが保証されます。

レスポンシブPDFレンダリングのためのビューポートの例を探る

GitHubで見る