IronPDF ハウツー ベースURL & アセットエンコーディング How to Use Base URLs & Asset Encoding in C# .NET 10 カーティス・チャウ 更新日:2026年1月31日 IronPDF をダウンロード NuGet ダウンロード DLL ダウンロード Windows 版 無料トライアル LLM向けのコピー LLM向けのコピー LLM 用の Markdown としてページをコピーする ChatGPTで開く このページについてChatGPTに質問する ジェミニで開く このページについてGeminiに問い合わせる Grokで開く このページについてGrokに質問する 困惑の中で開く このページについてPerplexityに問い合わせる 共有する Facebook で共有 Xでシェア(Twitter) LinkedIn で共有 URLをコピー 記事をメールで送る This article was translated from English: Does it need improvement? Translated View the article in English IronPDFのベース URL を使用すると、BaseUrlOrPath パラメータ (相対アセット解決用の Web URL またはローカル ファイル パス) を指定することにより、HTML から PDF への変換中に CSS、 JavaScript、および画像アセットを適切に読み込むことができます。 クイックスタート: IronPDFでベース URL を実装する .NET C#でHTMLからPDFへの変換中にシームレスにアセットをロードするためのベースURLを実装することで、IronPDFを使い始めることができます。 この例では、すべての CSS、 JavaScript、および画像が適切に参照されるように BaseUrlOrPath を設定し、最小限のセットアップで PDF 生成を簡素化する方法を示します。 IronPDF をNuGetパッケージマネージャでインストール PM > Install-Package IronPdf このコード スニペットをコピーして実行します。 new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<img src='icons/logo.png'>", @"C:\site\assets\").SaveAs("with-assets.pdf"); 実際の環境でテストするためにデプロイする 今日プロジェクトで IronPDF を使い始めましょう無料トライアル Free 30 Day Trial 最小限のワークフロー(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"); $vbLabelText $csharpLabel 外部資産を含む複雑なシナリオについては、フォントの管理や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"); $vbLabelText $csharpLabel <img src="../image/Sample.jpg"/> <img src="../image/Sample.png"/> <img src="../image/Sample.jpg"/> <img src="../image/Sample.png"/> HTML 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"/> HTML これらのフォーマットはMVCアプリでは機能しますが、IronPDFファイルパスでは失敗します: <img src="/image/footer.png"/> <img src="~/image/footer.png"/> <img src="/image/footer.png"/> <img src="~/image/footer.png"/> HTML )}] アセット ローディングの一般的なトラブルシューティングのヒントとは アセットが読み込めない場合は、以下のトラブルシューティング手順を検討してください: 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); $vbLabelText $csharpLabel 画像付きの 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 }; $vbLabelText $csharpLabel なぜヘッダーはメインドキュメントのベース 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); $vbLabelText $csharpLabel ローカル アセットを使用して 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"); $vbLabelText $csharpLabel 上記の例では、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.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"); $vbLabelText $csharpLabel 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"); $vbLabelText $csharpLabel 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"); $vbLabelText $csharpLabel なぜファイル参照よりも 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'>"; $vbLabelText $csharpLabel 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"); } $vbLabelText $csharpLabel 最適な結果を得るために 小さなアイコンやロゴ(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に相対アセット参照が含まれている場合は、必ずこのパラメータを指定してください。 カーティス・チャウ 今すぐエンジニアリングチームとチャット テクニカルライター Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。開発以外にも、CurtisはIoT(Internet of Things)への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。 準備はできましたか? Nuget ダウンロード 17,803,474 | バージョン: 2026.3 リリース 無料トライアル NuGet 無料版 総ダウンロード数: 17,803,474 ライセンスを見る まだスクロールしていますか? すぐに証拠が欲しいですか? PM > Install-Package IronPdf サンプルを実行するHTML が PDF に変換されるのを確認します。 NuGet 無料版 総ダウンロード数: 17,803,474 ライセンスを見る