【PDF.js】PC・スマホ対応！HTMLにPDFを埋め込む方法

2026年3月23日

HTMLに直接PDFを埋め込む際、単純に <iframe> を使うと「スマホで1ページ目しか表示されない」といった問題が発生します。

今回は、どのデバイスでも安定して表示ができるJavaScriptライブラリ「PDF.js」を使用した実装方法をご紹介します。

注意点

今回、最新バージョンを試したところ、「PCのChromeでは問題なく表示されるが、スマホや一部のブラウザではUIだけ表示されてPDFが表示されない」という現象に直面しました。

■原因
最新バージョンでは.mjsファイル（ES Modules）が使用されています。これがサーバー環境によっては、ブラウザがJavaScriptとして正しく認識できず、読み込みエラーになっていました。

■対応
.htaccessに.mjsをJavascriptファイルだと認識させるための記述を試したところ、スマホでは表示されましたが、PCの一部ブラウザでは改善されなかったため、最終的に.js版の旧バージョンを使用することで解決しました。

▼旧バージョンのダウンロードはこちら（pdfjs-2.6.347-dist.zipをダウンロードします）
https://github.com/mozilla/pdf.js/releases/tag/v2.6.347

実装の流れ

①PDF.jsをサーバーに設置する
ダウンロードしたzipを解凍し、サーバー上にアップします。フォルダ名は任意ですが、今回はpdfjsとしています。以下のようなディレクトリ構造になりました。

├── index.html (表示用ページ)
├── pdfjs/ (ライブラリ一式)
│ ├── build/
│ └── web/
│ └── viewer.html
└── pdf/
└── mtradblog.pdf (表示したいファイル)

②HTMLに記述をする

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTMLにPDFを埋め込む</title>
  <style>
    /* 画面いっぱいに表示するためのスタイル */
    html, body { margin: 0; height: 100%; overflow: hidden; }
    iframe { width: 100%; height: 100%; border: none; }
  </style>
</head>
<body>

  <iframe src="pdfjs/web/viewer.html?file=../../pdf/mtradblog.pdf"></iframe>

</body>
</html>