【Blazor】 iframeでPDFを表示する

以下のサンプルコードになります。

@page "/"
@inject IJSRuntime JSRuntime
@inject IWebHostEnvironment WebHostEnvironment

<PageTitle>Index</PageTitle>

<h1>PDFをiframeを表示する</h1>
@if (pdfUrl != null)
{
    <iframe src="@pdfUrl" width="100%" height="600px"></iframe>
}

@code{
    public string? pdfUrl = $"/download/Test.pdf";
}

<iframe>では、srcにファイルのパスを設定することで、PDFを表示することができます。 そのため、C#側からsrcへテスト用のPDFまでのパス/download/Test.pdfをセットしています。

実際に実行すると、以下のようになります。PDFが表示されることを確認してみてください。

base64を使って、PDFを表示することもできます。 base64については、以下記事に読むと理解が深まると思います。

base64ってなんぞ？？理解のために実装してみた

以下base64を使ったサンプルコードになります。

@page "/"
@inject IJSRuntime JSRuntime
@inject IWebHostEnvironment WebHostEnvironment

<PageTitle>Index</PageTitle>

<h1>PDFをiframeを表示する</h1>
@if (pdfUrl != null)
{
    <iframe src="@pdfUrl" width="100%" height="600px"></iframe>
}

@code{
    public string? pdfUrl = $"/download/Test.pdf";
}

wwwroot/download/Test.pdfからbyte配列で読み込んだ後、Convert.ToBase64Stringでbase64へ変換しています。

今回はファイルを読み込んでbase64をセットしていますが、あらかじめ変換したbase64を静的ファイルとして組み込んでおけば、 ファイル読み込む処理を省くこともできます。

今回は、iframeを使ってPDFを表示する方法について解説しました。

PDFの内容を確認したり、印刷したりすることができるので、簡単な帳票アプリなら利用できるかもしれません。 使う機会があれば、使ってみてください。