BlazorでPDFを埋め込み表示（Blazor Bootstrap）

1. はじめに

   • 記事の目的と背景
     VS Code と .NET9 を利用して、Blazor Bootstrap プロジェクトを構築したときの備忘録
     Blazor Bootstrap を利用したかった理由としては、PDF Viewer コンポーネントを簡単に利用したかったから。
   • 想定読者
     Blazor Bootstrap を利用したプロジェクトを VS Code と .NET8/9 で構築したい人向け。

2. 環境・前提条件

   • 使用したOS／バージョン
     Windows11

   • 開発環境（IDE、ライブラリ、クラウドなど）
     Windows11, VS Code

   • 前提知識や準備しておくべきこと
     .Net8/9 のインストール
     VS Code のインストール
     Blazor Bootstrap プロジェクトの作成(記事参照：)

3. Blazor Page の追加

   • メニューにページを追加
     MainLayout.razor のメニューリスト４番目に追加

           navItems = new List<NavItem>
                  {
                      new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
                      new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
                      new NavItem { Id = "3", Href = "/weather", IconName = IconName.Table, Text = "Fetch Data"},
                      new NavItem { Id = "4", Href = "/pdfview", IconName = IconName.Table, Text = "PDF View"},
   
   
                  };
   

   Pages フォルダに PdfView.razor ファイルを追加する。

4. PDFの表示

   • コンポーネントの貼り付け
     PdfView.razor ファイルにコードを記述する。

   @page "/pdfview"
   @rendermode InteractiveServer
   
   <PageTitle>PDF View</PageTitle>
   
   
   <p>@eventLog</p>
   
   <PdfViewer Class="mb-3"
              Url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
              OnDocumentLoaded="OnDocumentLoaded"
              OnPageChanged="OnPageChanged" />
   
   @code {
       private string eventLog { get; set; } = $"Last event: ..., CurrentPage: 0, TotalPages: 0";
   
       private void OnDocumentLoaded(PdfViewerEventArgs args)
           => eventLog = $"Last event: OnDocumentLoaded, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
   
       private void OnPageChanged(PdfViewerEventArgs args)
           => eventLog = $"Last event: OnPageChanged, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
   }
   

   url に設定した内容を表示できました。

簡単ですね。

1. ハマったポイント・トラブルシューティング

   • 実際に遭遇したエラーや課題
     特に課題はありませんでした。

   • 解決方法と参考リンク

2. 使ってみた感想

   • 良かった点／イマイチだった点
     コンポーネントの貼り付けだけで簡単にマークダウンを挿入できます。エディタにもなります。非常に簡単ですね。

3. まとめ

   • 記事の総括
     今回はマークダウンをrazorページ内に埋め込みを行いました。
     Blazor のソースコードはやはりシンプルでよいです。
     簡単にコピペして動作確認できますね。
     今後、chart や grid を使った記事を書いていく予定。

   • 参考資料のリンク
     Blazor Bootstrap のセットアップマニュアル(getting started)
     https://demos.blazorbootstrap.com/getting-started