jQueryとBootstrapでPDFをモーダルウィンドウに表示する方法

WebアプリケーションでPDFファイルを表示するケースは多々あります。特に、ユーザーがPDFをダウンロードする前にプレビューを見たい場合や、PDFの内容を直接Webページで確認したい場合には非常に便利です。この記事では、jQueryとBootstrapを使用して、PDFファイルをモーダルウィンドウで表示する方法を解説します。

必要なライブラリとツール
HTMLの構造
jQueryでの処理
まとめ

必要なライブラリとツール

jQuery
Bootstrap

これらのライブラリとツールは、CDNから簡単に取得できます。以下のコードをHTMLの<head>タグ内に追加してください。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

HTMLの構造

まず、HTMLの基本的な構造を設定します。モーダルウィンドウと、そのモーダル内にPDFを表示するための<iframe>タグを用意します。

<button id="showModal">PDFを表示</button>

<!-- モーダルの定義 -->
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">PDF表示</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- PDFを表示するiframe -->
        <iframe id="pdfIframe" src="" width="100%" height="600px"></iframe>
      </div>
    </div>
  </div>
</div>

jQueryでの処理

次に、jQueryを使ってモーダルウィンドウを制御します。ボタンがクリックされたときに、<iframe>のsrc属性にPDFのURLを設定し、モーダルウィンドウを表示します。

$(document).ready(function(){
  $("#showModal").click(function(){
    // PDFのURLを指定
    var pdfUrl = "path/to/your/pdf/file.pdf";
    
    // iframeのsrc属性にPDFのURLを設定
    $("#pdfIframe").attr("src", pdfUrl);
    
    // モーダルを表示
    $("#pdfModal").modal("show");
  });
});

まとめ

この記事では、jQueryとBootstrapを使用してPDFファイルをモーダルウィンドウで表示する方法を解説しました。この方法は、ユーザーがPDFの内容を確認する際に新しいタブやウィンドウを開かなくても済むため、UXの向上にも寄与します。

独自のスタイリングや機能を追加することも可能ですので、この基本的な実装をベースに、さまざまなカスタマイズを楽しんでください。