1. IronPDF
  2. ハウツー
  3. ベースURLおよびアセットエンコーディング

ベースURLとアセットエンコーディングの使用方法

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDFは、.NETプロジェクトでPDFドキュメントを生成するための便利なツールです。

このライブラリの一般的な用途は「HTML to PDF」レンダリングです。HTMLがPDFドキュメントをレンダリングするための設計言語として使用されます。 論理的な質問です： HTMLからPDFへの変換で、CSSスタイルシートと画像ファイルをどのように使用できますか？

CSSおよび画像を使用したHTMLの使用方法

申し訳ありませんが、翻訳するコンテンツのテキストを提供してください。その後、英語から日本語に翻訳いたします。!-- 行や列を追加する方法 -->
  1. IronPDF for HTML to CSS to Image Supportをダウンロードする
  2. 指定 BaseUrlOrPath（ベースURLまたはパス） HTMLで外部画像を使用するためのパラメーター
  3. 正しい設定を行う 元の内容を翻訳してください: ``` src ``` 翻訳: ``` src ``` MVCでWeb表示とPDF出力の両方を行う
  4. 指定 ベースURL カスタムヘッダーおよびフッターを操作するプロパティ
  5. 出力PDFをチェックする


画像とCSSアセットを使ったHTML文字列からのPDFレンダリング

HTML文字列からPDFへの変換を行う際、CSS、JavaScriptファイル、画像などのアセットのために BaseUrlOrPath パラメータを設定することが重要です。 BaseUrlOrPathは、すべてのアセットが相対的にロードされる基底URLを指定します。

これには、リモートアセットを読み込むための 'http' で始まるウェブURLや、ディスク上のアセットにアクセスするためのローカルファイルパスを指定できます。 BaseUrlOrPathを正しく設定することで、変換プロセス中にアセットが正しくロードされることが保証されます。

: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")
VB   C#

MVCアプリケーション

MVCアプリケーションにおいて、画像のファイルパスを指定することは困難な場合があります。 画像がIronPDFによって見つけられ、ウェブサイト上に正しく表示されるようにするためには、IronPDFのbaseUrlとHTML文字列のsrc=""属性を正しく設定する必要があります。

以下に示すファイル階層で設定してください

  • 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")
VB   C# 
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
HTML

[{私はあなたが提供するテキスト内容を日本語に翻訳いたします。よろしければ、翻訳したい内容をこちらに入力してください。(

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

以下の形式はChromeブラウザで閲覧する場合にうまく機能しますが、MVCアプリで使用すると誤ったフォルダディレクトリを指定します。これらの形式は、RenderHtmlAsPdfメソッドでbaseUrlOrPathが指定されている場合、IronPDFと共に動作します。

<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

)}]

画像とアセットを使用した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
}
VB   C#

CSS、JS、画像アセットを使用したHTMLファイルのPDF化

HTMLファイルを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")
VB   C#

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

For convenience, you may use 以下の日本語訳をお使いください:ChromePdfRenderOptionsのCustomCssUrlによるスタイルシートの追加.NET PDFレンダリングにのみ使用する追加のスタイルシートを指定する場合は、次のようにしてください。例えば:

: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")
VB   C#

次の内容にご注意ください。
ChromePdfRenderOptions.CustomCssUrlプロパティは現在、RenderHtmlAsPdfメソッドを使用してHTML文字列からPDFドキュメントをレンダリングする時にのみ機能します。

画像アセットエンコーディング

画像アセットは、HTMLファイルや文字列に直接エンコードすることができ、画像が見つからないという一部の厄介な問題を回避するのに役立ちます。 これを行うには、base64の使用を活用することができます:

  1. まず、画像ファイルを読み取るか、ネットワーク要求を通じて受信することにより、画像のバイナリデータを取得します。

  2. Microsoft .NETでConvert.ToBase64Stringメソッドを使用してバイナリデータをbase64に変換します。

  3. HTMLでイメージタグを構築する際に、base64データの前に「data:image/svg+xml;base64,」を使用します。 イメージタイプがbase64データの前に指定されていることにお気づきかもしれません。 ウェブサイトに訪問してください画像の種類とフォーマットに関するMDN Webドキュメント画像フォーマットタイプに関する詳細情報については。
: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")
VB   C#