PDFがプレビューで表示されない原因と対処法：Chrome・Safari・ブラウザでの解決策

PDFがプレビューで表示されない原因と対処法：Chrome・Safari・ブラウザでの解決策

イントロダクション
1. PDF プレビューが起動しない典型的な原因
2. トラブルシューティング：確認項目フロー
3. 実際に役立つ対処法（箇条書き）
4. よくあるケース別対処法
5. 具体的なサーバー設定サンプル
6. ブラウザ拡張機能・セキュリティソフトのチェックポイント
7. さらに深掘り：PDF.js を自前で組み込む
- ステップ
8. まとめ：チェックリスト
9. 今後の予防策

イントロダクション

ウェブサイトや企業内ポータルでPDFを共有する際、閲覧者がブラウザ内で「プレビュー」して確認したいケースが多くあります。しかし「PDFが表示されない」「何も起きない」という状況に直面すると、ユーザー体験が大きく損なわれます。
本稿では、Chrome、Safari をはじめとする主流ブラウザで起こりやすい「PDFプレビューが表示されない」原因を体系的に整理し、実際に解決できる対処法を解説します。

⚡ この記事は、ウェブ開発者・IT担当者を対象に、サーバー設定からブラウザ側の設定、PDF ファイルそのものの確認まで、一通りの手順を網羅しています。
目的は「原因を素早く絞り込み、最短でプレビュー表示を復旧」させることです。

1. PDF プレビューが起動しない典型的な原因

1.1 MIMEタイプの設定ミス

application/pdf を正しく返していない場合

ブラウザは任意の MIME タイプだったら application/octet-stream として扱い、ダウンロードしか起動しないことがあります。

1.2 Content-Disposition が attachment に設定されている

PDF を “インライン表示” したいなら inline を指定する必要がある。

attachment にすると、ブラウザは「ダウンロード」しかできません。

1.3 MIME スニッフィングにより PDF が JavaScript と判定された

何らかの誤設定で Content-Type が text/html か application/javascript になっていると、ブラウザは PDF を扱わず、スクリプト実行や HTML 表示に走ることがあります。

1.4 CORS（クロスオリジン）エラー

PDF をサブドメインや別サイトから読み込む場合、サーバーが Access-Control-Allow-Origin を返さないとブラウザはファイル読み込みをブロックします。

1.5 Mixed Content（HTTPS 上で HTTP 参照）

HTTPS サイトから HTTP で PDF をロードすると、ブラウザーは “Mixed Content” と判断し、ブロックします。

1.6 セキュリティ上の制約（Chrome の “Insecure content” 設定）

Google Chrome では「安全でないコンテンツのブロック」設定が有効だと、HTTPS ページからの HTTP PDF を無視します。

1.7 ブラウザ拡張機能やアドブロックの干渉

一部の拡張機能は PDF を検知してブロック・ダウンロード転送を行うものがあります。

1.8 PDF ファイル自体の破損や不正

ファイルのダウンロード元が壊れている、またはサーバー側で圧縮・エンコードに失敗した場合、閲覧者は「読み込み失敗」と表示されることがあります。

2. トラブルシューティング：確認項目フロー

ステップ	目的	実施方法
①	まずは別のブラウザで試す	Edge、Firefox、Safari で同じURLにアクセス
②	ブラウザが PDF を自動表示する設定か確認	Chrome なら `chrome://settings/content/pdfDocuments`。Safari なら `[設定] > [PDF] > PDF を自動で開く`
③	ネットワークタブでヘッダーを確認	Chrome DevTools → Network → 該当 PDF を選択 → Response Headers
④	`Content-Type` と `Content-Disposition` を確認	必要なら「application/pdf」「inline」に修正
⑤	CORS エラーが出ていないか => コンソール	`XMLHttpRequest` / `fetch` でエラーが `TypeError: Failed to fetch` となるか
⑥	Mixed Content の警告	コンソールに “Blocked a mixed active content” などがあるか
⑦	PDF 自体をローカルへダウンロードしてビューワで開けるか	ブラウザで直接ダウンロード → Adobe Reader 等で開く
⑧	拡張機能を無効化して再確認	Ctrl + Shift + A（Chrome）/ 拡張機能ページで全て一時停止
⑨	サーバー側でロギングを有効にし、アクセスログを確認	404/500/403 エラーがないか

3. 実際に役立つ対処法（箇条書き）

3.1 MIMEタイプの正しい設定例

サーバー	設定例
Apache	`.htaccess` で `AddType application/pdf .pdf`
Nginx	`types { pdf application/pdf; }`
Node.js (Express)	`app.get('/file.pdf', (req, res) => { res.contentType('application/pdf'); res.sendFile(path.join(__dirname, 'file.pdf')); });`

3.2 Content-Disposition を inline に設定

# Apache（.htaccess）
<FilesMatch "\.pdf$">
  Header set Content-Disposition "inline"
</FilesMatch>

これだけで、Chrome/Safari が自動的に PDF 表示を試みます。

3.3 CORS 対応（ヘッダーの付与）

add_header 'Access-Control-Allow-Origin' '*' always;

セキュリティ要件に合わせて * を適切に置き換えてください。

3.4 HTTPS での Mixed Content を回避

PDF ファイルを HTTPS 上でホスティングする。
CDN を利用している場合、CDN の HTTPS URL を使用。
fetch('/file.pdf') の前に https:// を明示的に付ける。

3.5 ブラウザの「安全でないコンテンツ」を許容

Chrome: chrome://flags/#unsafely-treat-insecure-origin-as-secure を有効化（実験的）。

ただし、本番環境での利用は推奨されません。

3.6 PDF 自体の検証方法

curl -I https://example.com/file.pdf
openssl s_client -connect example.com:443 -showcerts
PDF ビューワで開けるか。

4. よくあるケース別対処法

ケース 1: Chrome で「PDF をダウンロードするのみ」

想定原因	対処
`Content-Disposition: attachment`	`inline` にセット
PDF を外部から参照しているが CORS 失敗	CORS 設定を追加
Mixed Content	HTTPS 化

ケース 2: Safari で「表示されない」

想定原因	対処
Safari の PDF 自動読み込みがオフ	設定 > PDF > PDF を自動で開くをオン
PDF に `application/octet-stream` を返している	正しい MIME を設定
HTTPS で外部 PDF 参照時に安全でないコンテンツ制限	HTTPS 化 / 許可設定

ケース 3: IE/Edge で「PDF が開かない」

想定原因	対処
Office Web App が有効でない	ディスクにある PDF ではなく `data:` スキームで扱わない
サーバーから `application/pdf` ではなく `text/html`	サーバー設定修正
`X-Content-Type-Options: nosniff` が無効	追加でヘッダーを送信 (例: `application/pdf`)

5. 具体的なサーバー設定サンプル

5-1. Apache (.htaccess)

# PDF MIME を保証
AddType application/pdf .pdf

# インライン表示に設定
<FilesMatch "\.pdf$">
  Header set Content-Disposition "inline"
  Header set X-Content-Type-Options "nosniff"
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

5-2. Nginx

map $uri $force_inline {
    ~*.pdf 1;
}
server {
    add_header Content-Disposition "inline" always if=$force_inline;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Access-Control-Allow-Origin "*" always;
}

5-3. Node.js (Express)

app.get('/public/:filename', (req, res) => {
  const file = path.resolve(__dirname, 'public', req.params.filename);
  res.set({
    'Content-Type': 'application/pdf',
    'Content-Disposition': `inline; filename="${file}"`,
    'X-Content-Type-Options': 'nosniff',
    'Access-Control-Allow-Origin': '*',
  });
  res.sendFile(file);
});

6. ブラウザ拡張機能・セキュリティソフトのチェックポイント

拡張機能	影響例
AdBlock	PDF を広告として判断し、ブロック
Ghostery / uBlock Origin	`application/pdf` をブロック
PDF Viewer Chrome App	同一ページに複数 PDF 表示用が競合

対策: ブラウザを Incognito で開くか、拡張機能を一時無効化し、再度確認します。

7. さらに深掘り：PDF.js を自前で組み込む

自前の PDF 表示エンジン、PDF.js を設置すれば、ブラウザ側のビルトインビューワに依存せずに表示可能です。

ステップ

https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.min.js を読み込む。
<div id="pdf-viewer"></div> を用意。
JavaScript で PDF を読み込み、pdfjsLib.getDocument(url).promise でレンダリング。

<div id="pdf-viewer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfjs/3.6.172/pdf.min.js"></script>
<script>
  const url = 'https://example.com/file.pdf';
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.worker.min.js';
  pdfjsLib.getDocument(url).promise.then(pdf => {
    const viewer = document.getElementById('pdf-viewer');
    for (let i = 1; i <= pdf.numPages; i++) {
      pdf.getPage(i).then(page => {
        const canvas = document.createElement('canvas');
        const viewport = page.getViewport({ scale: 1.5 });
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise.then(() => {
          viewer.appendChild(canvas);
        });
      });
    }
  });
</script>

※ CDN から PDF.js を取得する形なら CORS も不要です。

8. まとめ：チェックリスト

ファイルの MIME タイプ → application/pdf
Content-Disposition → inline（ダウンロード時は attachment）
CORS → 必要なオリジンを許可（Access-Control-Allow-Origin）
Mixed Content → HTTPS 化
ブラウザ設定 → PDF 自動表示有効
拡張機能/セキュリティ → 一時停止で再確認
ファイル自体 → ダウンロードしてビューワで開けるか
サーバーログ → 404/500 エラーを確認
サーバー設定（Apache/Nginx/Node） → 必要ヘッダーを正しく返す

9. 今後の予防策

項目	実装例
CI/CD での自動化	CI で `curl -I` で MIME タイプ、PDF を取得できるか確認
監査ツール	Security headers などを自動でチェック（Mozilla Observatory、SSLLabs）
API ドキュメンテーション	PDF 取得 API で `Accept: application/pdf` を推奨
ユーザーサポート	「この URL で PDF が表示されない」トラブルレポートフォームを設置

結論
PDF がプレビューで表示されない問題は、いわゆる「ファイルを取得する段階で何かがブロックされてしまう」典型的なケースが多いです。
「ファイル→ MIMEタイプ→CORS→Mixed Content→拡張機能」と単純に順を追って検証し、必要に応じてサーバー設定やブラウザ側の設定を修正すればほとんどのケースは解決できます。

もし、上記対処法を実施しても問題が残る場合は、該当の URL をサーバー側の設定ファイルとともに 開発者フォーラムやコミュニティ（Stack Overflow、GitHub Discussions など）にサンプルを持ち込むと、他の開発者からさらに具体的なヒントが得られるでしょう。

PDF が正しく表示されれば、閲覧者のストレスは減り、情報共有のスピードも上がります。
少しずつ設定を積み上げて、安心・安全な PDF 配信環境を構築してください！