C# .NET 10でベースURLとアセットエンコーディングを使ったPDF 変換方法
IronPDFのベース URL を使用すると、BaseUrlOrPath パラメータ (相対アセット解決用の Web URL またはローカル ファイル パス) を指定することにより、HTML から PDF への変換中に CSS、 JavaScript、および画像アセットを適切に読み込むことができます。
クイックスタート: IronPDFでベース URL を実装する
.NET C#でHTMLからPDFへの変換中にシームレスにアセットをロードするためのベースURLを実装することで、IronPDFを使い始めることができます。 この例では、すべての CSS、 JavaScript、および画像が適切に参照されるように BaseUrlOrPath を設定し、最小限のセットアップで PDF 生成を簡素化する方法を示します。
最小限のワークフロー(5ステップ)
- HTMLからCSS、画像をサポートするIronPDFをダウンロードする。
- HTMLの外部画像に**`BaseUrlOrPath`**パラメータを指定してください。
- ウェブとPDF表示のために、MVCで正しい**`src`**を構成する。
- カスタムヘッダーとカスタムフッターに**`BaseUrl`**プロパティを指定する
- 出力PDFをチェックする
画像と CSS アセットを含む HTML 文字列から PDF をレンダリングするには?
HTML文字列をPDFに変換するとき、CSS、JavaScriptファイル、画像などのアセットにはBaseUrlOrPathパラメータを設定します。 BaseUrlOrPath は、すべてのアセットが相対的にロードされるベース URL を指定します。
これは、リモート資産をロードするための"http"で始まるWeb URLまたはディスク上の資産にアクセスするためのローカルファイルパスであることができます。 BaseUrlOrPath を正しく設定すると、変換中にアセットが適切に読み込まれるようになります。 HTMLからPDFへの変換の詳細については、包括的なHTML to PDFチュートリアルをご覧ください。
:path=/static-assets/pdf/content-code-examples/how-to/base-urls-baseurl.cs
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");
Imports IronPdf
' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()
Private baseUrl As String = "C:\site\assets\"
Private html As String = "<img src='icons/iron.png'>"
' Render HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, baseUrl)
' Export PDF
pdf.SaveAs("html-with-assets.pdf")
外部資産を含む複雑なシナリオについては、フォントの管理やPDFへの画像の追加に関するガイドをご覧ください。
MVCアプリケーションでベースURLを設定するには?
MVCアプリケーションでは、画像ファイルのパスを指定するには慎重な設定が必要です。 To ensure IronPDF finds images and displays them correctly on the website, configure the baseUrl and HTML src="" attribute properly.
以下のファイル階層を設定
baseUrlOrPathから @"wwwroot/image" へsrc属性を "../image/Sample.jpg" に変更
wwwroot
└── image
├── Sample.jpg
└── Sample.png
例えば:
:path=/static-assets/pdf/content-code-examples/how-to/base-mvc.cs
// 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")
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
ASP.NET Core MVC固有の実装については、CSHTML to PDF (MVC Core)ガイドを参照してください。
どのファイルパス形式を避けるべきですか?
機能しないファイルパス形式
これらの形式はChromeブラウザでは動作しますが、MVCアプリでは誤ったディレクトリを参照します。IronPDFIronPDF、RenderHtmlAsPdfを指定すれば動作します。
<img src="image/footer.png"/>
<img src="./image/footer.png"/>
<img src="image/footer.png"/>
<img src="./image/footer.png"/>
これらのフォーマットはMVCアプリでは機能しますが、IronPDFファイルパスでは失敗します:
<img src="/image/footer.png"/>
<img src="~/image/footer.png"/>
<img src="/image/footer.png"/>
<img src="~/image/footer.png"/>
)}]
アセット ローディングの一般的なトラブルシューティングのヒントとは
アセットが読み込めない場合は、以下のトラブルシューティング手順を検討してください:
1.絶対パスを検証する:アクセシビリティを確認するために、開発中に絶対ファイルパスを使用してください。 2.ファイルパーミッションのチェック: アプリケーションがアセットディレクトリへの読み取りアクセス権を持っていることを確認する。 3.リモート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)
画像付きの HTML ヘッダーとフッターを追加するにはどうすればよいですか?
新規または既存のPDFにHTMLヘッダーとフッターをレンダリングするとき、それらは独立したHTMLドキュメントとして扱われ、PDFからBaseURLを継承しません。 包括的なヘッダーとフッターのオプションについては、ヘッダーとフッターのガイドをご覧ください。
アセットをロードするBaseURLを設定します:
:path=/static-assets/pdf/content-code-examples/how-to/base-header-footer.cs
using IronPdf;
using System;
// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Add header
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
MaxHeight = 20,
HtmlFragment = "<img src='logo.png'>",
BaseUrl = new Uri(@"C:\assets\images\").AbsoluteUri
};
Imports IronPdf
Imports System
' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()
' Add header
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
.MaxHeight = 20,
.HtmlFragment = "<img src='logo.png'>",
.BaseUrl = (New Uri("C:\assets\images\")).AbsoluteUri
}
なぜヘッダーはメインドキュメントのベース 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)
ローカル アセットを使用して HTML ファイルを PDF に変換するにはどうすればよいですか?
HTMLファイルをPDFにレンダリングする場合、すべてのアセットはそのファイルにローカルであると仮定されます。HTMLファイルの変換については、HTML File to PDFガイドをご覧ください。
:path=/static-assets/pdf/content-code-examples/how-to/base-html-file.cs
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")
上記の例では、JS、CSS、画像ファイルはすべて、ディスク上のC:˶Assetsフォルダ(HTMLファイルと同じディレクトリ)から読み込まれます。
For convenience, use CustomCssUrl in ChromePdfRenderOptions for Additional Stylesheets to specify an additional stylesheet used only .NET 向け PDF rendering if desired. 例えば:
:path=/static-assets/pdf/content-code-examples/how-to/base-html-file-baseurl.cs
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")
ChromePdfRenderOptions.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")
HTMLでBase64を使って画像を直接エンコードするには?
画像アセットは、HTMLファイルまたは文字列に直接エンコードすることができ、画像の欠落による問題を避けることができます。 このアプローチでは、base64エンコーディングを使用してください。 さまざまな画像フォーマットについては、画像ガイドを参照してください。
1.まず、ファイルを読み込むか、ネットワークリクエストで受信して、画像のバイナリデータを取得します。
- Microsoft .NETの
Convert.ToBase64Stringメソッドを使用して、バイナリ データを base64 に変換します。 - base64データの前に "data:image/svg+xml;base64," を使用し、HTML内で画像タグを構築します。 画像タイプはbase64データの前に指定されることに注意してください。 MDN Web Docsの画像タイプとフォーマットを訪れて、画像フォーマットタイプについての詳細を得ることができます。
:path=/static-assets/pdf/content-code-examples/how-to/add-images-to-pdfs-base64-image.cs
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")
なぜファイル参照よりも 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'>";
Imports System.IO
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 = extension.ToLower() Select Case extension
Case ".png"
mimeType = "image/png" ' Best for graphics with transparency
Case ".jpg", ".jpeg"
mimeType = "image/jpeg" ' Best for photographs
Case ".gif"
mimeType = "image/gif" ' Best for simple animations
Case ".svg"
mimeType = "image/svg+xml" ' Best for scalable graphics
Case ".webp"
mimeType = "image/webp" ' Best overall compression
Case Else
mimeType = "image/png" ' Default fallback
End Select
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
最適な結果を得るために
- 小さなアイコンやロゴ(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に相対アセット参照が含まれている場合は、必ずこのパラメータを指定してください。

