導入文
ウェブサイトで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
- GitHub からビルトインサーバの
-
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 をブロック。
手順
- ブラウザの拡張機能ページ(
chrome://extensions、edge://extensions、about:addons)へ移動。 - 試験的に「無効化」 → 「再読み込み」 → PDF を再度開く。
- 再び有効化し、別の拡張機能を無効化してループ。
備考
企業ネットワーク経由では、社内ポリシーにより拡張機能を無効にできない場合があります。システム管理者に問い合わせることが必要です。
ブラウザキャッシュとクッキーのクリア
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-Typeがapplication/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"が出ていないか確認。
対策
fetchのエラーハンドリングを追加し、CORS エラーを表示。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 タブ)を使い、具体的なエラーコードやヘッダー情報を確認して、原因を絞り込むのが最適です。


コメント