ベース URL の使用方法と C# .NET でのアセット エンコード 10
IronPDFのベースURLは、BaseUrlOrPathパラメータを指定することで、HTMLからPDFへの変換時にCSS、JavaScript、イメージアセットが適切にロードされるようにします。
クイックスタート: IronPDFでのベースURLの実装
.NET C#でHTMLからPDFへの変換中にシームレスにアセットをロードするためのベースURLを実装することで、IronPDFを使い始めることができます。 この例では、BaseUrlOrPathを設定して、すべてのCSS、JavaScript、画像が適切に参照されるようにし、最小限の設定でPDF生成を簡素化する方法を示します。
今すぐ NuGet で PDF を作成してみましょう:
NuGet パッケージ マネージャーを使用して IronPDF をインストールします
このコード スニペットをコピーして実行します。
new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<img src='icons/logo.png'>", @"C:\site\assets\").SaveAs("with-assets.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.csusing 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");外部資産を含む複雑なシナリオについては、フォントの管理や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");<!-- 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"/>ASP.NET Core MVC固有の実装については、CSHTML to PDF (MVC Core)ガイドを参照してください。
どのファイルパス形式を避けるべきですか?
ブラケット-w-OPEN--@@@。
機能しないファイルパス形式
これらのフォーマットはChromeブラウザでは動作しますが、MVCアプリでは間違ったディレクトリを指します。もしbaseUrlOrPathがRenderHtmlAsPdfメソッドで提供されるなら、これらはIronPDFで動作します:
<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);画像付きの HTML ヘッダーとフッターを追加するにはどうすればよいですか?
新規または既存のPDFにHTMLヘッダーとフッターをレンダリングするとき、それらは独立したHTMLドキュメントとして扱われ、PDFからBaseURLを継承しません。 包括的なヘッダーとフッターのオプションについては、ヘッダーとフッターのガイドをご覧ください。
アセットをロードするBaseURLを設定します:
:path=/static-assets/pdf/content-code-examples/how-to/base-header-footer.csusing 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
};なぜヘッダーはメインドキュメントのベース 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);ローカル アセットを使用して HTML ファイルを PDF に変換するにはどうすればよいですか?
HTMLファイルをPDFにレンダリングする場合、すべてのアセットはそのファイルにローカルであると仮定されます。HTMLファイルの変換については、HTML File to PDFガイドをご覧ください。
:path=/static-assets/pdf/content-code-examples/how-to/base-html-file.csusing 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");上記の例では、JS、CSS、画像ファイルはすべて、ディスク上のC:˶Assetsフォルダ(HTMLファイルと同じディレクトリ)から読み込まれます。
For convenience, use CustomCssUrl in ChromePdfRenderOptions for Additional Stylesheets to specify an additional stylesheet used only for .NET PDF rendering if desired. 例えば:
:path=/static-assets/pdf/content-code-examples/how-to/base-html-file-baseurl.csusing 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");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");HTMLでBase64を使って画像を直接エンコードするには?
画像アセットは、HTMLファイルまたは文字列に直接エンコードすることができ、画像の欠落による問題を避けることができます。 このアプローチでは、base64エンコーディングを使用してください。 さまざまな画像フォーマットについては、画像ガイドを参照してください。
1.まず、ファイルを読み込むか、ネットワークリクエストで受信して、画像のバイナリデータを取得します。
2.バイナリデータをbase64に変換するには、Microsoft .NETのConvert.ToBase64Stringメソッドを使用します。
- 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.csusing 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");なぜファイル参照よりも 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'>";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");
}最適な結果を得るために
- 小さなアイコンやロゴ(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に相対アセット参照が含まれている場合は、必ずこのパラメータを指定してください。






