How to Use Base URLs & Asset Encoding in C# .NET 10

Q: HTMLをPDFに変換する際、CSSやJavaScriptのアセットが正しく読み込まれるようにするにはどうすればよいですか？

IronPDFではHTMLからPDFへの変換時にBaseUrlOrPathパラメータを指定することができます。このパラメータはウェブURLまたはローカルファイルパスで、HTML内のすべての相対アセットパスのベースリファレンスとなり、CSS、JavaScript、画像が適切に読み込まれるようにします。

Q: BaseUrlOrPathパラメータは何に使うのですか？

IronPDFのBaseUrlOrPathパラメータは、HTMLからPDFへの変換時にすべてのアセット(CSS、JavaScript、画像)が相対的に読み込まれるベースURLを指定します。リモートアセットには'http'で始まるウェブURL、ディスクベースのアセットにはローカルファイルパスを設定できます。

Q: たった1行のコードでアセットを含むPDFをレンダリングするには？

IronPDFのChromePdfRendererを使って1行でHTMLをアセットと一緒にレンダリングすることができます: `new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("", @"C:∕Assets").SaveAs("with-assets.pdf");`.これは、すべてのアセットが適切に読み込まれるように BaseUrlOrPath を設定します。

Q: PDF生成のためにMVCアプリケーションで画像パスを構成するにはどうすればよいですか？

IronPDFを使用するMVCアプリケーションでは、baseUrlOrPathをwwwrootサブディレクトリに設定し(例: @"wwwroot/image")、相対パスでHTMLのsrc属性を設定します(例: "../image/Sample.jpg")。こうすることで、画像がウェブサイト上でも生成されたPDF内でも正しく表示されるようになります。

Q: HTMLをPDFに変換する際、ローカルとリモートの両方のアセットを使用できますか？

はい、IronPDFはローカルとリモートの両方のアセットをサポートしています。リモートアセットについては、BaseUrlOrPathを'http'で始まるウェブURLに設定してください。ローカルアセットにはディスク上のファイルパスを使用してください。この柔軟性により、PDF生成時にさまざまなソースからアセットを参照することができます。

Q: BaseUrlOrPathパラメータを設定しないとどうなりますか？

IronPDFでBaseUrlOrPathパラメータを設定しないと、HTMLの相対アセットパスが正しく解決されず、生成されるPDFのCSSスタイル、JavaScript機能、画像が欠落します。HTMLに相対アセット参照が含まれている場合は、必ずこのパラメータを指定してください。

Q: How does Base64 encoding affect the size of my PDFs?

Base64 encoding increases HTML and subsequently PDF size due to data being represented in a larger format. Use it for smaller images, while larger assets should use external references to optimize PDF size.

Q: What are the benefits of using Base64 encoding in IronPDF?

Base64 encoding benefits include creating self-contained HTML, ensuring cross-platform compatibility, reducing security risks by eliminating file system access, and preventing missing asset errors in live environments.

Q: How do I handle relative asset paths in HTML files for PDF conversion in IronPDF?

Ensure your file structure supports the relative paths in your HTML file, and use `RenderHtmlFileAsPdf` from IronPDF to convert HTML files to PDFs while correctly loading CSS and JavaScript resources.

Q: Why don't headers and footers in IronPDF inherit Base URLs from the main document?

Headers and footers in IronPDF do not inherit Base URLs from the main document to maintain styling independence, ensure consistent rendering, and allow flexible asset organization for optimal PDF creation.

Curtis Chau

Updated: 2026年6月4日

IronPDFのベースURLを使用すると、BaseUrlOrPathパラメーターを指定することで、HTMLからPDFへの変換中にCSS、JavaScript、および画像アセットを正しく読み込むことができ、アセットの相対解決のためのウェブURLまたはローカルファイルパスを指定できます。

クイックスタート: IronPDFでベース URL を実装する

.NET C#でHTMLからPDFへの変換中にシームレスにアセットをロードするためのベースURLを実装することで、IronPDFを使い始めることができます。この例は、すべてのCSS、JavaScript、および画像が正しく参照されるようにBaseUrlOrPathを設定する方法を示しており、設定が最小限で済み、PDF生成が簡素化されます。

1Install IronPDF with NuGet Package Manager
PM > Install-Package IronPdf
```
Install-Package IronPdf
```

2このコードスニペットをコピーして実行します。

new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<img src='icons/logo.png'>", @"C:\site\assets\").SaveAs("with-assets.pdf");

new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<img src='icons/logo.png'>", @"C:\site\assets\").SaveAs("with-assets.pdf");

3実際の環境でテストするためにデプロイする

今日プロジェクトで IronPDF を使い始めましょう無料トライアル

最小限のワークフロー（5ステップ）

HTMLからCSS、画像をサポートするIronPDFをダウンロードする。
BaseUrlOrPathパラメータをHTMLの外部画像に指定
WebとPDF表示に対してMVCで正しいsrcを設定
BaseUrlプロパティを使用してカスタムヘッダーとフッターを指定
出力PDFをチェックする

Convert.ToBase64String

画像と CSS アセットを含む HTML 文字列から PDF をレンダリングするには?

HTML文字列をPDFに変換する際には、CSS、JavaScriptファイル、および画像のアセット用にBaseUrlOrPathパラメーターを設定してください。 BaseUrlOrPathは、すべてのアセットがロードされる基本URLを指定します。 CustomCssUrl

これは、リモート資産をロードするための"http"で始まるWeb URLまたはディスク上の資産にアクセスするためのローカルファイルパスであることができます。変換中のアセットが正しくロードされることを保証するために、BaseUrlOrPathを正しく設定してください。 HTMLからPDFへの変換の詳細については、包括的なHTML to PDFチュートリアルをご覧ください。

using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

string baseUrl = @"C:\site\assets\";
string html = "<img src='icons/iron.png'>";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html, baseUrl);

// Export PDF
pdf.SaveAs("html-with-assets.pdf");

using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

string baseUrl = @"C:\site\assets\";
string html = "<img src='icons/iron.png'>";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html, baseUrl);

// Export PDF
pdf.SaveAs("html-with-assets.pdf");

Dim renderer As New ChromePdfRenderer()

Dim baseUrl As String = "C:\site\assets\"
Dim html As String = "<img src='icons/iron.png'>"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, baseUrl)

pdf.SaveAs("html-with-assets.pdf")

Dim renderer As New ChromePdfRenderer()

Dim baseUrl As String = "C:\site\assets\"
Dim html As String = "<img src='icons/iron.png'>"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, baseUrl)

pdf.SaveAs("html-with-assets.pdf")

外部資産を含む複雑なシナリオについては、フォントの管理やPDFへの画像の追加に関するガイドをご覧ください。

MVCアプリケーションでベースURLを設定するには?

MVCアプリケーションでは、画像ファイルのパスを指定するには慎重な設定が必要です。 IronPDFが画像を見つけ、ウェブサイトで正しく表示できるようにするために、src=""属性を適切に設定してください。

以下のファイル階層を設定

baseUrlOrPathを"wwwroot/image"に設定する
src属性を"../image/Sample.jpg"に設定する

wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

Text

例えば:

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("html.Result", @"wwwroot/image");

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("html.Result", @"wwwroot/image");

' Instantiate ChromePdfRenderer
Dim renderer As New ChromePdfRenderer()

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("html.Result", "wwwroot/image")

' Instantiate ChromePdfRenderer
Dim renderer As New ChromePdfRenderer()

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("html.Result", "wwwroot/image")

<!-- Correct image references for MVC -->
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>

<!-- Correct image references for MVC -->
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>

HTML

ASP.NET Core MVC固有の実装については、CSHTML to PDF (MVC Core)ガイドを参照してください。

どのファイルパス形式を避けるべきですか?

警告:

機能しないファイルパス形式

これらの形式はChromeブラウザで動作しますが、MVCアプリでのディレクトリが間違っています。IronPDFではbaseUrlOrPathが提供されている場合に機能します:

<img src="image/footer.png"/>  
<img src="./image/footer.png"/>

<img src="image/footer.png"/>  
<img src="./image/footer.png"/>

HTML

これらのフォーマットはMVCアプリでは機能しますが、IronPDFファイルパスでは失敗します：

<img src="/image/footer.png"/>  
<img src="~/image/footer.png"/>

<img src="/image/footer.png"/>  
<img src="~/image/footer.png"/>

HTML

)}]

アセットローディングの一般的なトラブルシューティングのヒントとは

アセットが読み込めない場合は、以下のトラブルシューティング手順を検討してください：

絶対パスを確認する: 開発中に絶対ファイルパスを使用してアクセス可能性を確認
ファイルの権限を確認する: アセットディレクトリへの読み取りアクセスがアプリケーションにあることを確認
リモートURLでテストする: フル資格URLを使用してパスの問題を分離 4.ロギングを有効にする：資産の読み込みをデバッグするためにIronPDFのカスタムロギングを使用してください。

// Example: Debug asset loading with absolute paths
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Enable debug logging
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.RenderDelay(500); // Give assets time to load

// Use absolute path for testing
string absoluteBasePath = Path.GetFullPath(@"C:\MyProject\wwwroot\assets");
string html = @"
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>";

PdfDocument pdf = renderer.RenderHtmlAsPdf(html, absoluteBasePath);

// Example: Debug asset loading with absolute paths
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Enable debug logging
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.RenderDelay(500); // Give assets time to load

// Use absolute path for testing
string absoluteBasePath = Path.GetFullPath(@"C:\MyProject\wwwroot\assets");
string html = @"
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>";

PdfDocument pdf = renderer.RenderHtmlAsPdf(html, absoluteBasePath);

Imports System.IO

' Example: Debug asset loading with absolute paths
Dim renderer As New ChromePdfRenderer()

' Enable debug logging
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.RenderDelay(500) ' Give assets time to load

' Use absolute path for testing
Dim absoluteBasePath As String = Path.GetFullPath("C:\MyProject\wwwroot\assets")
Dim html As String = "
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, absoluteBasePath)

Imports System.IO

' Example: Debug asset loading with absolute paths
Dim renderer As New ChromePdfRenderer()

' Enable debug logging
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.RenderDelay(500) ' Give assets time to load

' Use absolute path for testing
Dim absoluteBasePath As String = Path.GetFullPath("C:\MyProject\wwwroot\assets")
Dim html As String = "
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, absoluteBasePath)

画像付きの HTML ヘッダーとフッターを追加するにはどうすればよいですか?

HTMLヘッダーとフッターを新規または既存のPDFにレンダリングする際には、これらは独立したHTMLドキュメントとして扱われ、PDFからBaseURLを継承しません。包括的なヘッダーとフッターのオプションについては、ヘッダーとフッターのガイドをご覧ください。

アセットがロードされるBaseURLを設定する: ChromePdfRenderOptions

なぜヘッダーはメインドキュメントのベース URL を継承しないのですか

ヘッダーとフッターは、パフォーマンスと分離のために別々のHTMLドキュメントとしてレンダリングされます。このデザインにより

メインコンテンツに影響を与えない独立したスタイリング
すべてのページでの一貫したレンダリング
大規模ドキュメント向けの優れたメモリ管理
異なるアセットソースを使用する柔軟性

ヘッダーとコンテンツで異なるベース URL を設定するにはどうすればよいですか?

アセットを効果的に整理するために、ヘッダー、フッター、メインコンテンツに異なるベースURLを指定します：

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Main content base URL
string contentBaseUrl = @"C:\website\public\";

// Header specific assets
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    BaseUrl = new Uri(@"C:\website\headers\").AbsoluteUri
};

// Footer specific assets
renderer.RenderingOptions.HtmlFooter = new HtmlHeaderFooter()
{
    HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    BaseUrl = new Uri(@"C:\website\footers\").AbsoluteUri
};

// Render main content with its own base URL
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl);

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Main content base URL
string contentBaseUrl = @"C:\website\public\";

// Header specific assets
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    BaseUrl = new Uri(@"C:\website\headers\").AbsoluteUri
};

// Footer specific assets
renderer.RenderingOptions.HtmlFooter = new HtmlHeaderFooter()
{
    HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    BaseUrl = new Uri(@"C:\website\footers\").AbsoluteUri
};

// Render main content with its own base URL
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl);

Dim renderer As New ChromePdfRenderer()

' Main content base URL
Dim contentBaseUrl As String = "C:\website\public\"

' Header specific assets
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    .BaseUrl = New Uri("C:\website\headers\").AbsoluteUri
}

' Footer specific assets
renderer.RenderingOptions.HtmlFooter = New HtmlHeaderFooter() With {
    .HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    .BaseUrl = New Uri("C:\website\footers\").AbsoluteUri
}

' Render main content with its own base URL
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl)

Dim renderer As New ChromePdfRenderer()

' Main content base URL
Dim contentBaseUrl As String = "C:\website\public\"

' Header specific assets
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    .BaseUrl = New Uri("C:\website\headers\").AbsoluteUri
}

' Footer specific assets
renderer.RenderingOptions.HtmlFooter = New HtmlHeaderFooter() With {
    .HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    .BaseUrl = New Uri("C:\website\footers\").AbsoluteUri
}

' Render main content with its own base URL
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl)

私のお気に入りのこの種のライブラリはIronPDFです。PDFファイルの迅速で効率的な操作が可能です。また、PDF/A形式へのエクスポートやPDF文書へのデジタル署名といった多くの貴重な機能も備えています。

Milan Jovanovic

Microsoft MVP

ケーススタディを見る

IronOCRのおかげで私たちは年間$40,000を手作業の処理から節約し、生産性を向上させ、高影響のタスクにリソースを充てることができます。非常にお勧めします。

Brent Matzelle

最高技術責任者, OPYN

ケーススタディを見る

ローカルアセットを使用して HTML ファイルを PDF に変換するにはどうすればよいですか?

HTMLファイルをPDFにレンダリングする場合、すべてのアセットはそのファイルにローカルであると仮定されます。HTMLファイルの変換については、HTML File to PDFガイドをご覧ください。

using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML file to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("C:\\Assets\\TestInvoice1.html");

// Export PDF
pdf.SaveAs("Invoice.pdf");

using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML file to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("C:\\Assets\\TestInvoice1.html");

// Export PDF
pdf.SaveAs("Invoice.pdf");

Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Render HTML file to PDF
Private pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Assets\TestInvoice1.html")

' Export PDF
pdf.SaveAs("Invoice.pdf")

Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Render HTML file to PDF
Private pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Assets\TestInvoice1.html")

' Export PDF
pdf.SaveAs("Invoice.pdf")

上記の例では、JS、CSS、画像ファイルはすべて、ディスク上のC:˶Assetsフォルダ（HTMLファイルと同じディレクトリ）から読み込まれます。

利便性のために、.NETのPDFレンダリング専用の追加のスタイルシートを指定するには、CustomCssUrlを使用してください。例えば：

using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set additional CSS url
renderer.RenderingOptions.CustomCssUrl = "./style.css";

// Render HTML file to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export PDF
pdf.SaveAs("tryCss.pdf");

using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set additional CSS url
renderer.RenderingOptions.CustomCssUrl = "./style.css";

// Render HTML file to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export PDF
pdf.SaveAs("tryCss.pdf");

Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Set additional CSS url
renderer.RenderingOptions.CustomCssUrl = "./style.css"

' Render HTML file to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")

' Export PDF
pdf.SaveAs("tryCss.pdf")

Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Set additional CSS url
renderer.RenderingOptions.CustomCssUrl = "./style.css"

' Render HTML file to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")

' Export PDF
pdf.SaveAs("tryCss.pdf")

CustomCssUrl

ご注意: RenderHtmlAsPdfメソッドを使用してHTML文字列からPDFにレンダリングする際のみ機能します。

追加のスタイリングに CustomCssUrl を使用するのはいつですか?

CustomCssUrlは以下に理想的です:

印刷専用のスタイル: ナビゲーションメニューやインタラクティブ要素を隠す
PDFレイアウトの最適化: 印刷に合わせたマージンとページ区切り
条件付きフォーマット: PDF生成時のみスタイルを適用
A/Bテスト：ソースHTMLを変更することなく、さまざまなPDFレイアウトをテストする。

HTMLファイルで相対アセットパスを処理するにはどうすればよいですか?

相対パスを含むHTMLファイルを扱う場合は、ファイル構造が参照をサポートしていることを確認してください：

// Example HTML file structure
/*
C:\Projects\Reports\
    ├── invoice.html
    ├── css\
    │   └── styles.css
    ├── js\
    │   └── calculations.js
    └── images\
        └── logo.png
*/

// HTML content with relative paths
string htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>";

// Save HTML and render
File.WriteAllText(@"C:\Projects\Reports\invoice.html", htmlContent);
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlFileAsPdf(@"C:\Projects\Reports\invoice.html");
pdf.SaveAs("invoice-output.pdf");

// Example HTML file structure
/*
C:\Projects\Reports\
    ├── invoice.html
    ├── css\
    │   └── styles.css
    ├── js\
    │   └── calculations.js
    └── images\
        └── logo.png
*/

// HTML content with relative paths
string htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>";

// Save HTML and render
File.WriteAllText(@"C:\Projects\Reports\invoice.html", htmlContent);
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlFileAsPdf(@"C:\Projects\Reports\invoice.html");
pdf.SaveAs("invoice-output.pdf");

Imports System.IO
Imports IronPdf

' Example HTML file structure
'
' C:\Projects\Reports\
'     ├── invoice.html
'     ├── css\
'     │   └── styles.css
'     ├── js\
'     │   └── calculations.js
'     └── images\
'         └── logo.png
'

' HTML content with relative paths
Dim htmlContent As String = "
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>"

' Save HTML and render
File.WriteAllText("C:\Projects\Reports\invoice.html", htmlContent)
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Projects\Reports\invoice.html")
pdf.SaveAs("invoice-output.pdf")

Imports System.IO
Imports IronPdf

' Example HTML file structure
'
' C:\Projects\Reports\
'     ├── invoice.html
'     ├── css\
'     │   └── styles.css
'     ├── js\
'     │   └── calculations.js
'     └── images\
'         └── logo.png
'

' HTML content with relative paths
Dim htmlContent As String = "
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>"

' Save HTML and render
File.WriteAllText("C:\Projects\Reports\invoice.html", htmlContent)
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Projects\Reports\invoice.html")
pdf.SaveAs("invoice-output.pdf")

HTMLでBase64を使って画像を直接エンコードするには?

画像アセットは、HTMLファイルまたは文字列に直接エンコードすることができ、画像の欠落による問題を避けることができます。このアプローチでは、base64エンコーディングを使用してください。このアプローチでは、base64エンコーディングを使用してください。このアプローチにはbase64エンコーディングを使用:

まず、ファイルを読み取るか、ネットワークリクエストを介して画像のバイナリデータを取得します。
Microsoft .NETでバイナリデータをベース64に変換するにはConvert.ToBase64Stringメソッドを使用します。
base64データの前に "data:image/svg+xml;base64," を使用し、HTML内で画像タグを構築します。画像タイプはbase64データの前に指定されることに注意してください。 MDN Web Docsの画像タイプとフォーマットを訪れて、画像フォーマットタイプについての詳細を得ることができます。

using IronPdf;
using System;
using System.IO;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Import image file binary data
byte[] binaryData = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg");

// Convert the binary data to base 64
string imgDataUri = Convert.ToBase64String(binaryData);

// Embed in HTML
string html = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>";

// Convert HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

// Export the PDF
pdf.SaveAs("embedImageBase64.pdf");

using IronPdf;
using System;
using System.IO;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Import image file binary data
byte[] binaryData = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg");

// Convert the binary data to base 64
string imgDataUri = Convert.ToBase64String(binaryData);

// Embed in HTML
string html = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>";

// Convert HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

// Export the PDF
pdf.SaveAs("embedImageBase64.pdf");

Imports IronPdf
Imports System
Imports System.IO

Private renderer As New ChromePdfRenderer()

' Import image file binary data
Private binaryData() As Byte = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg")

' Convert the binary data to base 64
Private imgDataUri As String = Convert.ToBase64String(binaryData)

' Embed in HTML
Private html As String = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>"

' Convert HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

' Export the PDF
pdf.SaveAs("embedImageBase64.pdf")

Imports IronPdf
Imports System
Imports System.IO

Private renderer As New ChromePdfRenderer()

' Import image file binary data
Private binaryData() As Byte = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg")

' Convert the binary data to base 64
Private imgDataUri As String = Convert.ToBase64String(binaryData)

' Embed in HTML
Private html As String = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>"

' Convert HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

' Export the PDF
pdf.SaveAs("embedImageBase64.pdf")

なぜファイル参照よりも Base64 エンコードを選ぶのでしょうか

Base64エンコーディングにはいくつかの利点があります：

自己完結型HTML: 外部依存がないため、配布が簡単
クロスプラットフォーム互換性: ファイルシステムの違いに関係なく機能
セキュリティ: ファイルシステムアクセスが不要でセキュリティリスクが低減
信頼性: 本番環境でのアセット欠損エラーを排除
バージョン管理: 画像がHTML内に含まれているため、バージョニングが簡素化

ただし、以下のトレードオフを考慮してください：

HTMLサイズの増加: base64エンコーディングによりサイズが約33%増加
キャッシュなし: 埋め込まれた画像は個別にキャッシュできない
メモリ使用量: 画像全体がメモリに読み込まれなければなりません。

どのような画像形式が Base64 エンコーディングに最適ですか?

画像フォーマットが異なると、base64エンコード時の効率も異なります：

// Example: Encoding different image formats
public string EncodeImageWithMimeType(string imagePath)
{
    byte[] imageBytes = File.ReadAllBytes(imagePath);
    string base64 = Convert.ToBase64String(imageBytes);
    
    // Determine MIME type based on extension
    string extension = Path.GetExtension(imagePath).ToLower();
    string mimeType = extension switch
    {
        ".png" => "image/png",      // Best for graphics with transparency
        ".jpg" or ".jpeg" => "image/jpeg",  // Best for photographs
        ".gif" => "image/gif",       // Best for simple animations
        ".svg" => "image/svg+xml",   // Best for scalable graphics
        ".webp" => "image/webp",     // Best overall compression
        _ => "image/png"             // Default fallback
    };
    
    return $"data:{mimeType};base64,{base64}";
}

// Usage
string encodedImage = EncodeImageWithMimeType("logo.png");
string html = $"<img src='{encodedImage}' alt='Company Logo'>";

// Example: Encoding different image formats
public string EncodeImageWithMimeType(string imagePath)
{
    byte[] imageBytes = File.ReadAllBytes(imagePath);
    string base64 = Convert.ToBase64String(imageBytes);
    
    // Determine MIME type based on extension
    string extension = Path.GetExtension(imagePath).ToLower();
    string mimeType = extension switch
    {
        ".png" => "image/png",      // Best for graphics with transparency
        ".jpg" or ".jpeg" => "image/jpeg",  // Best for photographs
        ".gif" => "image/gif",       // Best for simple animations
        ".svg" => "image/svg+xml",   // Best for scalable graphics
        ".webp" => "image/webp",     // Best overall compression
        _ => "image/png"             // Default fallback
    };
    
    return $"data:{mimeType};base64,{base64}";
}

// Usage
string encodedImage = EncodeImageWithMimeType("logo.png");
string html = $"<img src='{encodedImage}' alt='Company Logo'>";

' Example: Encoding different image formats
Public Function EncodeImageWithMimeType(imagePath As String) As String
    Dim imageBytes As Byte() = File.ReadAllBytes(imagePath)
    Dim base64 As String = Convert.ToBase64String(imageBytes)
    
    ' Determine MIME type based on extension
    Dim extension As String = Path.GetExtension(imagePath).ToLower()
    Dim mimeType As String = If(extension, {
        ".png", "image/png",        ' Best for graphics with transparency
        ".jpg", "image/jpeg",       ' Best for photographs
        ".jpeg", "image/jpeg",      ' Best for photographs
        ".gif", "image/gif",        ' Best for simple animations
        ".svg", "image/svg+xml",    ' Best for scalable graphics
        ".webp", "image/webp"       ' Best overall compression
    }, "image/png")                ' Default fallback
    
    Return $"data:{mimeType};base64,{base64}"
End Function

' Usage
Dim encodedImage As String = EncodeImageWithMimeType("logo.png")
Dim html As String = $"<img src='{encodedImage}' alt='Company Logo'>"

' Example: Encoding different image formats
Public Function EncodeImageWithMimeType(imagePath As String) As String
    Dim imageBytes As Byte() = File.ReadAllBytes(imagePath)
    Dim base64 As String = Convert.ToBase64String(imageBytes)
    
    ' Determine MIME type based on extension
    Dim extension As String = Path.GetExtension(imagePath).ToLower()
    Dim mimeType As String = If(extension, {
        ".png", "image/png",        ' Best for graphics with transparency
        ".jpg", "image/jpeg",       ' Best for photographs
        ".jpeg", "image/jpeg",      ' Best for photographs
        ".gif", "image/gif",        ' Best for simple animations
        ".svg", "image/svg+xml",    ' Best for scalable graphics
        ".webp", "image/webp"       ' Best overall compression
    }, "image/png")                ' Default fallback
    
    Return $"data:{mimeType};base64,{base64}"
End Function

' Usage
Dim encodedImage As String = EncodeImageWithMimeType("logo.png")
Dim html As String = $"<img src='{encodedImage}' alt='Company Logo'>"

Base64エンコーディングはPDFファイルのサイズにどのように影響しますか?

Base64エンコーディングは、予測可能な方法でPDFサイズに影響を与えます：

// Comparison example
public void CompareFileSizes()
{
    ChromePdfRenderer renderer = new ChromePdfRenderer();
    
    // Method 1: External image reference
    string htmlExternal = "<img src='large-photo.jpg'>";
    PdfDocument pdfExternal = renderer.RenderHtmlAsPdf(htmlExternal, @"C:\images\");
    
    // Method 2: Base64 encoded image
    byte[] imageBytes = File.ReadAllBytes(@"C:\images\large-photo.jpg");
    string base64Image = Convert.ToBase64String(imageBytes);
    string htmlBase64 = $"<img src='data:image/jpeg;base64,{base64Image}'>";
    PdfDocument pdfBase64 = renderer.RenderHtmlAsPdf(htmlBase64);
    
    // Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length / 1024} KB");
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length / 1024} KB");
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length / 1024} KB");
}

// Comparison example
public void CompareFileSizes()
{
    ChromePdfRenderer renderer = new ChromePdfRenderer();
    
    // Method 1: External image reference
    string htmlExternal = "<img src='large-photo.jpg'>";
    PdfDocument pdfExternal = renderer.RenderHtmlAsPdf(htmlExternal, @"C:\images\");
    
    // Method 2: Base64 encoded image
    byte[] imageBytes = File.ReadAllBytes(@"C:\images\large-photo.jpg");
    string base64Image = Convert.ToBase64String(imageBytes);
    string htmlBase64 = $"<img src='data:image/jpeg;base64,{base64Image}'>";
    PdfDocument pdfBase64 = renderer.RenderHtmlAsPdf(htmlBase64);
    
    // Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length / 1024} KB");
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length / 1024} KB");
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length / 1024} KB");
}

' Comparison example
Public Sub CompareFileSizes()
    Dim renderer As New ChromePdfRenderer()

    ' Method 1: External image reference
    Dim htmlExternal As String = "<img src='large-photo.jpg'>"
    Dim pdfExternal As PdfDocument = renderer.RenderHtmlAsPdf(htmlExternal, "C:\images\")

    ' Method 2: Base64 encoded image
    Dim imageBytes As Byte() = File.ReadAllBytes("C:\images\large-photo.jpg")
    Dim base64Image As String = Convert.ToBase64String(imageBytes)
    Dim htmlBase64 As String = $"<img src='data:image/jpeg;base64,{base64Image}'>"
    Dim pdfBase64 As PdfDocument = renderer.RenderHtmlAsPdf(htmlBase64)

    ' Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length \ 1024} KB")
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length \ 1024} KB")
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length \ 1024} KB")
End Sub

' Comparison example
Public Sub CompareFileSizes()
    Dim renderer As New ChromePdfRenderer()

    ' Method 1: External image reference
    Dim htmlExternal As String = "<img src='large-photo.jpg'>"
    Dim pdfExternal As PdfDocument = renderer.RenderHtmlAsPdf(htmlExternal, "C:\images\")

    ' Method 2: Base64 encoded image
    Dim imageBytes As Byte() = File.ReadAllBytes("C:\images\large-photo.jpg")
    Dim base64Image As String = Convert.ToBase64String(imageBytes)
    Dim htmlBase64 As String = $"<img src='data:image/jpeg;base64,{base64Image}'>"
    Dim pdfBase64 As PdfDocument = renderer.RenderHtmlAsPdf(htmlBase64)

    ' Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length \ 1024} KB")
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length \ 1024} KB")
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length \ 1024} KB")
End Sub

最適な結果を得るために

小さなアイコンやロゴ（<50KB）にはbase64を使用
大きな画像や写真には外部参照を使用
エンコーディング前に圧縮を考慮
コンテンツタイプに適した画像形式を使用

高度なPDF最適化テクニックについては、PDF圧縮ガイドをご覧ください。

よくある質問

HTMLをPDFに変換する際、CSSやJavaScriptのアセットが正しく読み込まれるようにするにはどうすればよいですか？

IronPDFではHTMLからPDFへの変換時にBaseUrlOrPathパラメータを指定することができます。このパラメータはウェブURLまたはローカルファイルパスで、HTML内のすべての相対アセットパスのベースリファレンスとなり、CSS、JavaScript、画像が適切に読み込まれるようにします。

BaseUrlOrPathパラメータは何に使うのですか？

IronPDFのBaseUrlOrPathパラメータは、HTMLからPDFへの変換時にすべてのアセット(CSS、JavaScript、画像)が相対的に読み込まれるベースURLを指定します。リモートアセットには'http'で始まるウェブURL、ディスクベースのアセットにはローカルファイルパスを設定できます。

たった1行のコードでアセットを含むPDFをレンダリングするには？

IronPDFのChromePdfRendererを使って1行でHTMLをアセットと一緒にレンダリングすることができます: `new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("", @"C:∕Assets").SaveAs("with-assets.pdf");`.これは、すべてのアセットが適切に読み込まれるように BaseUrlOrPath を設定します。

PDF生成のためにMVCアプリケーションで画像パスを構成するにはどうすればよいですか？

IronPDFを使用するMVCアプリケーションでは、baseUrlOrPathをwwwrootサブディレクトリに設定し(例: @"wwwroot/image")、相対パスでHTMLのsrc属性を設定します(例: "../image/Sample.jpg")。こうすることで、画像がウェブサイト上でも生成されたPDF内でも正しく表示されるようになります。

HTMLをPDFに変換する際、ローカルとリモートの両方のアセットを使用できますか？

はい、IronPDFはローカルとリモートの両方のアセットをサポートしています。リモートアセットについては、BaseUrlOrPathを'http'で始まるウェブURLに設定してください。ローカルアセットにはディスク上のファイルパスを使用してください。この柔軟性により、PDF生成時にさまざまなソースからアセットを参照することができます。

BaseUrlOrPathパラメータを設定しないとどうなりますか？

IronPDFでBaseUrlOrPathパラメータを設定しないと、HTMLの相対アセットパスが正しく解決されず、生成されるPDFのCSSスタイル、JavaScript機能、画像が欠落します。HTMLに相対アセット参照が含まれている場合は、必ずこのパラメータを指定してください。

How does Base64 encoding affect the size of my PDFs?

Base64 encoding increases HTML and subsequently PDF size due to data being represented in a larger format. Use it for smaller images, while larger assets should use external references to optimize PDF size.

What are the benefits of using Base64 encoding in IronPDF?

Base64 encoding benefits include creating self-contained HTML, ensuring cross-platform compatibility, reducing security risks by eliminating file system access, and preventing missing asset errors in live environments.

How do I handle relative asset paths in HTML files for PDF conversion in IronPDF?

Ensure your file structure supports the relative paths in your HTML file, and use `RenderHtmlFileAsPdf` from IronPDF to convert HTML files to PDFs while correctly loading CSS and JavaScript resources.

Why don't headers and footers in IronPDF inherit Base URLs from the main document?

Headers and footers in IronPDF do not inherit Base URLs from the main document to maintain styling independence, ensure consistent rendering, and allow flexible asset organization for optimal PDF creation.

Curtis Chau

今すぐエンジニアリングチームとチャット

テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

...

詳しく読む