PDFが表示されない原因と対策を徹底解説!ブラウザ設定・PDFリーダーのトラブルシューティング完全版

導入文

ウェブサイトでPDFを閲覧しようとすると「ファイルが開けない」「何も表示されない」といった症状に直面することは、ユーザーにとって大きなストレスです。原因はブラウザ側の設定ミス、拡張機能の干渉、サーバ側のレスポンスヘッダー、PDF自体の破損など多岐にわたります。この記事では、“PDF が表示されない” という悩みを持つ読者が直面しがちな原因と対策を、ブラウザ設定・拡張機能・サーバ設定・PDFファイルの側面に分けて徹底解説します。実際に試せる設定手順も併せて紹介しますので、読者は「今すぐ対策を実行できる」体験が得られます。


ウェブブラウザのPDFビューア設定チェック

1️⃣ Chrome・Edge・Firefox でビルトインビューアを有効化

ブラウザ 設定手順 参考画像
Chrome chrome://settings/content/pdfDocuments へアクセス、② 「PDF を自動でダウンロード」オフに ![Chrome PDF設定]
Edge edge://settings/content/pdfDocuments へアクセス、② 「PDF をダウンロード」オフに ![Edge PDF設定]
Firefox about:preferences#applications へアクセス、② Portable Document Format (*.pdf) の行で「PDF Viewer」を選択 ![Firefox PDF設定]

ポイント

  • 既定で「PDF を自動でダウンロード」に設定されていると、ファイルはダウンロードだけされ画面には表示されません。
  • 変更後は必ずブラウザを再起動して反映させるようにしましょう。

2️⃣ ビルトインビューアが無効になっている場合の代替

  • PDF.js を利用

    • GitHub からビルトインサーバの pdf.js を取得し、/viewer.html?file=URL の形で埋め込む。
    • 例:https://mozilla.github.io/pdf.js/web/viewer.html?file=https://example.com/sample.pdf
  • Google Docs Viewer

    • https://docs.google.com/gview?embedded=true&url=PDF_URL で埋め込み。
    • ブロックされるケースは稀ですが、CORS の影響も少ないです。

拡張機能とプラグインを確認

1️⃣ 拡張機能が原因で PDF がブロックされるケース

  • uBlock Origin / AdBlock
    • セキュリティ設定が「ファイルタイプ」までブロックしてしまうことがあります。
  • Ghostery / Privacy Badger
    • カスタムフィルタが PDF の取得を止めている場合があります。
  • Security / Antivirus アドオン
    • 企業環境で導入される「HTTPS Everywhere」や「NoScript」などが、外部 PDF をブロック。

手順

  1. ブラウザの拡張機能ページ(chrome://extensionsedge://extensionsabout:addons)へ移動。
  2. 試験的に「無効化」 → 「再読み込み」 → PDF を再度開く。
  3. 再び有効化し、別の拡張機能を無効化してループ。

備考
企業ネットワーク経由では、社内ポリシーにより拡張機能を無効にできない場合があります。システム管理者に問い合わせることが必要です。


ブラウザキャッシュとクッキーのクリア

1️⃣ キャッシュが古いと PDF が再読み込みされない

  • 手動リフレッシュCtrl+Shift+R(Chrome, Edge, Firefox)
  • キャッシュクリアchrome://settings/clearBrowserData(Edge 同上)

2️⃣ クッキー設定が原因で PDF に認証情報が送れない

  • クッキーが有効か確認chrome://settings/content/cookies
  • 必要に応じて「同一サイトのクッキー」や「外部クッキー」に対して許可設定。

ヒント
社内イントラの場合、SAML 認証で PDF へのアクセスが失敗しているケースがあります。SAML のシングルサインオン(SSO)設定を再確認してください。


PDF ファイル自体の状態

1️⃣ ファイルが破損・不完全な場合

  • ファイルの確認:別デバイスや別 PDF リーダーで開く.
  • ダウンロードの途中で停止した場合は再ダウンロードする。

2️⃣ ファイルの圧縮形式(ZIP など)で扱う場合

  • 圧縮を解除unzip コマンドやブラウザの拡張機能を使用。
  • ただし、ファイルが暗号化されている場合は、再度パスワード取得が必要です。

MIMEタイプとレスポンスヘッダーの適切設定

サーバ側が Content-Type: application/pdf で PDF を返却していないと、ブラウザは未知の形式として扱い、ダウンロードだけに終わることがあります。

Apache (.htaccess)

AddType application/pdf .pdf
<FilesMatch "\.pdf$">
  Header set Content-Type "application/pdf; charset=utf-8"
  # 可能ならキャッシュ制御も設定
  Header set Cache-Control "public, max-age=31536000"
</FilesMatch>

Nginx (mime.types または conf)

types {
    application/pdf  pdf;
}

nginx header for pdf

location ~* \.pdf$ {
    add_header Content-Type application/pdf;
}

確認方法
curl -I https://example.com/file.pdf
Content-Typeapplication/pdf になっているか確認。


サイト側の HTTP ヘッダーとセキュリティ設定

1️⃣ X-Content-Type-Options: nosniff

  • ブラウザが MIME タイプを検証する。適切に設定されていないとダウンロードのみ。
  • 設定例(Apache):
Header set X-Content-Type-Options "nosniff"

2️⃣ Content-Disposition: inline

  • attachment に設定されていると必ずダウンロード。
  • 例:
Header set Content-Disposition "inline; filename=\"sample.pdf\""

ポイント
Content-Disposition は必ず inline にしないと、ブラウザは「ダウンロード」モードに投げ込みます。


JavaScript による PDF の埋め込みやダウンロード

多くの SPA(Single Page Application)で PDF を埋め込み、XHR で取得するケースがあります。ここでは代表的な失敗ポイントと対策を紹介します。

1️⃣ CORS エラーにより取得不可

fetch('https://example.com/file.pdf', {mode: 'cors'})
  .catch(err => console.error(err));
  • サーバ側で Access-Control-Allow-Origin: * を返す必要があります。

2️⃣ ダウンロードリンクを <a> に設定し忘れる

<a href="file.pdf" target="_blank">PDF を開く</a>
  • target="_blank" がない場合、画面に PDF が埋め込まれるだけでダウンロードになるケースがあります。

3️⃣ PDF.js を使っているが、スクリプトがエラーで停止

  • コンソールで "Refused to load the script because it violates the following Content Security Policy directive" が出ていないか確認。

対策

  1. fetch のエラーハンドリングを追加し、CORS エラーを表示。
  2. Content-Security-Policy ヘッダーを確認し、script-src に PDF.js の CDN を許可。

外部PDFリーダーを使う方法

ブラウザ内蔵のビューアが使えない、または特定の機能(注釈付けやフォーム入力)が必要な場合、外部リーダーを利用するのも有効です。

1️⃣ Adobe Acrobat Reader DC

  • Windows/Mac/Linux 上で公式アプリをダウンロードし、ファイルを起動。
  • 「クリックで開く」設定を有効にすると、システムのファイルダイアルゴに PDF ファイルが表示されます。

2️⃣ モバイル端末(iOS/Android)

  • それぞれ App Store / Play Store で「Adobe Acrobat Reader」等のアプリをインストール。
  • ブラウザから PDF をタップすると、アプリで開くオプションが表示されます。

3️⃣ 代替ビューア(Foxit, SumatraPDF)

  • 軽量で高速に動作するので、特に低スペックマシンのユーザーにおすすめ。

注意
セキュリティポリシーで外部アプリの起動を許可していない環境(企業環境)では、代替リーダーを活用できない場合があります。


まとめ

  • ブラウザのビューア設定 をまず確認し、ビルトインか代替ビューアを選択。
  • 拡張機能 が干渉していないかを一時的に無効化。
  • キャッシュ・クッキー をクリアし、再読み込み。
  • サーバ側のレスポンスヘッダーapplication/pdf であることと、Content-Disposition: inline を確認。
  • JavaScript / CORS のエラーがあれば、サーバ設定で Access-Control-Allow-Origin を許可。
  • それでも表示されない場合は PDF ファイル自体の破損 を疑い、別リーダーで確認。
  • 必要に応じて 外部リーダー を導入し、ユーザー体験を向上。

これらのステップを踏むことで、ほとんどの「PDF が表示されない」問題は解決できます。
もし解決しない場合は、Web サーバのログやブラウザのデベロッパーツール(Network タブ)を使い、具体的なエラーコードやヘッダー情報を確認して、原因を絞り込むのが最適です。

コメント