如何在 C# .NET 10 中使用基本 URL 和資源編碼

透過指定 BaseUrlOrPath 參數，IronPDF 中的基本 URL 可讓 CSS、JavaScript 和圖片資產在 HTML 至 PDF 的轉換過程中被正確載入，該參數可以是網頁 URL 或用於相對資產解析的本機檔案路徑。

快速入門：在 IronPDF 中實作基本 URL

在使用 .NET C# 將 HTML 轉換為 PDF 的過程中，透過實作基礎 URL 來實現資產的無縫載入，即可開始使用 IronPDF。 本範例示範如何設定 BaseUrlOrPath 以確保所有 CSS、JavaScript 和圖片都能正確引用，以最少的設定簡化 PDF 的產生。

我該如何使用圖片和 CSS 資產從 HTML 字串渲染 PDF？ --> <！--說明：顯示程式碼執行輸出或結果的截圖 --> 將 HTML 字串轉換為 PDF 時，請為 CSS、JavaScript 檔案和圖片等資產設定 **BaseUrlOrPath** 參數。 `BaseUrlOrPath` 指定所有資產相對載入的基本 URL。 這可以是以 'http' 開頭的網頁 URL，用來載入遠端資產；或是本機檔案路徑，用來存取磁碟上的資產。 正確設定 `BaseUrlOrPath` 可確保資產在轉換過程中正常載入。 如需瞭解 HTML 轉換為 PDF 的更多詳細資訊，請查看我們全面的 [HTML to PDF 教學](https://ironpdf.com/tutorials/html-to-pdf/)。 ```csharp :path=/static-assets/pdf/content-code-examples/how-to/base-urls-baseurl.cs ``` 對於涉及外部資產的複雜情況，請參閱我們的 [ 管理字型](https://ironpdf.com/how-to/manage-fonts/) 或 [在 PDF 中加入圖片](https://ironpdf.com/how-to/add-images-to-pdfs/)指南。

如何在 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"。 ```txt wwwroot └── image ├── Sample.jpg └── Sample.png ``` **例如：** ```csharp :path=/static-assets/pdf/content-code-examples/how-to/base-mvc.cs ``` ```html ``` 有關 ASP.NET Core MVC 的特定實作，請參閱我們的 [CSHTML to PDF (MVC Core) 指南](https://ironpdf.com/how-to/cshtml-to-pdf-mvc-core/)。

哪些檔案路徑格式應該避免？

警告@ #### 無效的檔案路徑格式 這些格式可在 Chrome 瀏覽器中使用，但在 MVC 應用程式中卻指向錯誤的目錄。如果在 `RenderHtmlAsPdf` 方法中提供 `baseUrlOrPath` 的話，它們就能在 IronPDF 中運作： ```html ``` 這些格式適用於 MVC 應用程式，但 IronPDF 檔案路徑卻失敗： ```html ``` @@--括號關閉--@@

資產載入的常見疑難排解技巧有哪些？ 當資產無法載入時，請考慮這些疑難排解步驟： 1.**驗證絕對路徑**：在開發過程中使用絕對檔案路徑以確認存取性 2.**檢查檔案權限**：確保應用程式擁有資產目錄的讀取權限 3.**使用遠端 URL 進行測試**：使用完全合格的 URL 來隔離路徑問題 4.**啟用日誌**：使用 IronPDF 的[自訂日誌](https://ironpdf.com/how-to/custom-logging/)來除錯資產載入 ```csharp // 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 = @" "; PdfDocument pdf = renderer.RenderHtmlAsPdf(html, absoluteBasePath); ``` ## 如何使用圖片新增 HTML 標頭和頁尾？ <！--說明：說明程式碼概念的圖表或截圖 --> 當呈現 HTML 標題和頁尾至新的或現有的 PDF 時，它們會被視為獨立的 HTML 文件，不會繼承 PDF 的 BaseURL。 有關全面的頁首和頁尾選項，請參閱我們的 [ 頁首和頁尾指南](https://ironpdf.com/how-to/headers-and-footers/)。 設定可載入資產的 BaseURL： ```csharp :path=/static-assets/pdf/content-code-examples/how-to/base-header-footer.cs ```

為什麼標頭不繼承主文件的基本 URL？ 為了效能與隔離，頁首與頁尾會以獨立的 HTML 文件呈現。 此設計允許 - 不影響主要內容的獨立造型 - 所有頁面的呈現一致 - 為大型文件提供更好的記憶體管理 - 靈活使用不同的資產來源

如何為標頭與內容設定不同的基本 URL？ 為標頭、頁尾和主要內容指定不同的基本 URL，以便有效組織資產： ```csharp ChromePdfRenderer renderer = new ChromePdfRenderer(); // Main content base URL string contentBaseUrl = @"C:\website\public\"; // Header specific assets renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter() { HtmlFragment = "", BaseUrl = new Uri(@"C:\website\headers\").AbsoluteUri }; // Footer specific assets renderer.RenderingOptions.HtmlFooter = new HtmlHeaderFooter() { HtmlFragment = "

© 2024 Company

", BaseUrl = new Uri(@"C:\website\footers\").AbsoluteUri }; // Render main content with its own base URL PdfDocument pdf = renderer.RenderHtmlAsPdf("", contentBaseUrl); ```

如何使用本機資產將 HTML 檔案轉換為 PDF？ --> <！--說明：顯示程式碼執行輸出或結果的截圖 --> 將 HTML 檔案渲染為 PDF 時，所有資產都會假設為該檔案的本機資產。請參閱我們的 [HTML 檔案轉換為 PDF 指南](https://ironpdf.com/how-to/html-file-to-pdf/)，瞭解轉換 HTML 檔案的更多資訊。 ```csharp :path=/static-assets/pdf/content-code-examples/how-to/base-html-file.cs ``` 在上面的範例中，所有的 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. 舉例來說 ```csharp :path=/static-assets/pdf/content-code-examples/how-to/base-html-file-baseurl.cs ``` [{i:(`ChromePdfRenderOptions.CustomCssUrl`屬性目前僅在使用`RenderHtmlAsPdf`方法從 HTML 字串渲染至 PDF 時起作用。

何時應該使用 CustomCssUrl 進行額外的樣式設計？ CustomCssUrl 非常適合以下用途： - **Print 特定樣式**：隱藏導航選單或互動元素 - **PDF版面最佳化**：調整邊距和分頁符以利列印 - **條件格式化**：僅在產生 PDF 時套用樣式 - **A/B測試**：測試不同的PDF版面，而無需修改來源HTML

如何處理 HTML 檔案中的相對資產路徑？ 在處理包含相對路徑的 HTML 檔案時，請確保您的檔案結構支援參考： ```csharp // 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 = @" "; // 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"); ```

如何使用 Base64 直接在 HTML 中編碼圖片？ 圖片資產可直接編碼為 HTML 檔案或字串，避免遺失圖片的問題。 本方法使用 base64 編碼。 如需處理各種圖片格式，請參閱我們的 [圖片指南](https://ironpdf.com/how-to/add-images-to-pdfs/)。 1.首先透過讀取檔案或透過網路請求接收，取得影像的二進位資料。 2.使用 Microsoft .NET 中的 `Convert.ToBase64String` 方法將二進位資料轉換為 base64。 3. 在 HTML 中使用"data:image/svg+xml;base64"在 base64 資料之前建立圖像標籤。 請注意，圖片類型是在 base64 資料之前指定的。 有關圖像格式類型的更多信息，請訪問[MDN Web 文件中的"圖像類型和格式"部分](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types)。 ```csharp :path=/static-assets/pdf/content-code-examples/how-to/add-images-to-pdfs-base64-image.cs ```

為何我會選擇 Base64 編碼而非檔案參考？ Base64 編碼具有多項優點： - **自包含 HTML**：無外部依賴性，簡化發行程序 - **跨平台相容性**：不受檔案系統差異的影響 - **安全性**：無需存取檔案系統，可降低安全風險 - **可靠性**：消除生產中遺失資產的錯誤 - **版本控制**：圖片是 HTML 的一部分，可簡化版本控制 然而，請考慮這些取捨： - **增加的 HTML 大小**：Base64 編碼增加了約 33% 的大小 - **無快取**：內嵌的圖片無法單獨快取 - **記憶體使用量**：整個圖片必須在記憶體中載入

哪些圖片格式最適合使用 Base64 編碼？ 不同的圖像格式在 base64 編碼時有不同的效率： ```csharp // 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 = $""; ```

Base64 編碼如何影響 PDF 檔案大小？ Base64 編碼會以可預測的方式影響 PDF 大小： ```csharp // Comparison example public void CompareFileSizes() { ChromePdfRenderer renderer = new ChromePdfRenderer(); // Method 1: External image reference string htmlExternal = ""; 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 = $""; 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"); } ``` 為達到最佳效果： - 小圖示和標誌使用 base64 (< 50KB) - 大型圖片和照片使用外部參考資料 - 編碼前考慮壓縮 - 針對內容類型使用適當的圖片格式 如需進階的 PDF 最佳化技術，請探索我們的 [ PDF 壓縮指南](https://ironpdf.com/how-to/pdf-compression/)。