PDFを別ウィンドウで開く簡単設定方法：ブラウザでの手順とトラブル回避

2026.01.14

最初に確認したいのは、PDFが本当に「別ウィンドウ（タブ）」で開くように指定されているかどうかです。
ウェブサイトを構築する際に、PDFリンクをクリックしたときに自動で同じタブに埋め込まれ、ページのレイアウトが崩れるケースがよくあります。
このブログでは、主要ブラウザ（Google Chrome、Mozilla Firefox、Microsoft Edge、Safari）でPDFを「別ウィンドウ（タブ）」に開く設定方法と、よくあるトラブルの対処法をステップバイステップで解説します。

1. 基本的なリンクの書き方

まずはHTML側で、PDFを新しいタブで開くための最もシンプルかつ一般的な書き方から始めましょう。

<a href="docs/sample.pdf" target="_blank" rel="noopener noreferrer">PDFを読む</a>
  • target="_blank" は「新しいタブで開く」ことをブラウザに指示します。
  • rel="noopener noreferrer" はセキュリティ対策です。外部サイトへのリンクで使うと、開いたタブがオリジンを知らないようにします（ページが自分のタブにアクセスできないようにする）。

これだけで、ほとんどの場合はPDFが別タブで開きます。
それでも「同じタブで開く」場合は次に進みましょう。

2. ブラウザの設定でPDF表示を強制する

2.1 Google Chrome

ChromeはPDFを組み込みビューワで自動表示します。
ただし、download 属性が付いているリンクではダウンロードしか起こらないことがあります。

<a href="docs/sample.pdf" target="_blank" rel="noopener noreferrer">PDFを読む</a>
  • 設定の確認
    1. chrome://settings/ を開く
    2. 「プライバシーとセキュリティ」 > 「サイト設定」
    3. 「PDF ドキュメント」に進み、「PDF ドキュメントを自動でダウンロードする」 がオフになっているか確認します。
    4. オンにすると、PDFがブラウザで表示されます。

2.2 Mozilla Firefox

Firefoxでは「PDFを閲覧」設定で別タブ表示を制御できます。

  1. about:preferences#privacy を開く
  2. 「Firefox で閲覧できるファイル」にある 「PDF ファイルをデフォルトのアプリで開く」 オプションをオフにします。
  3. 「PDF を閲覧する」 というチェックボックスをオンにします。
  4. これでPDFリンクは別タブで開くようになります。

Firefox ではさらにabout:config で細かい設定もできます（以下のセクションで紹介）。

2.3 Microsoft Edge

EdgeはChromeと同じエンジン（Chromium）です。
手順はChrome と同じです。
edge://settings/downloads で 「PDF ファイルを自動でダウンロードする」 をオフにし、target="_blank" を付けたリンクを使います。

2.4 Apple Safari

Safari では PDF を別タブで開く標準設定がありません。
Safari では PDF が組み込みで表示されるため、target="_blank" が無視されることがあります。
しかし、以下の方法で別タブ表示を実現できます。

  • JavaScript を使う方法 
    document.querySelectorAll('a.pdf-link').forEach(a => {
    a.addEventListener('click', e => {
        e.preventDefault();
        window.open(a.href, '_blank', 'noopener,noreferrer');
    });
});

    このスクリプトをページに追加すれば、リンクに class="pdf-link" を付けたものだけ別タブで開きます。

3. ブラウザ側の about:config での高度な調整（Firefox 用）

Firefox の about:config で PDF ビューアの挙動をさらに細かく設定できます。
警告： about:config はデフォルト設定を変更するため、誤った設定をするとブラウザの安定性に影響を与えることがあります。以下の設定は慎重に実行してください。

設定 値 目的
browser.download.manager.showWhenStarting false ダウンロードマネージャを表示しない
browser.helperApps.alwaysAsk.force false 自動判定で PDF を開く
browser.helperApps.neverAsk.openFile application/pdf PDF は常に開く
pdfjs.disabled false 組み込みの PDF.js を有効にする
  • pdfjs.disabled = false にすると Firefox は内部 PDF.js を使って表示し、別タブで開きやすくなります。
  • browser.helperApps.neverAsk.openFile に application/pdf を追加すると、ダウンロードではなく直接開くようになります。

4. サーバーサイドの Content‑Disposition ヘッダーの影響

サーバー側で PDF を Content-Disposition: attachment で送信している場合、ブラウザは自動でダウンロードを促します。
リンクに target="_blank" を付けてもダウンロードが優先されるわけです。

解決策
PDF を「別タブで開く」ようにしたい場合は、サーバーから Content-Disposition: inline を返すか、ヘッダーを送らない設定にしてください。
例:

Content-Type: application/pdf
Content-Disposition: inline; filename="sample.pdf"

もしサーバーが設定変更できない環境なら、JavaScript で Blob を生成して URL.createObjectURL() を使い、プログラム的に PDF を別タブで開くというトリッキーな方法もあります。

5. CORS と CSP が原因で開かないケース

5.1 CORS（Cross‑Origin Resource Sharing）

  • 別ドメインにある PDF を取得して表示しようとしたとき、ブラウザは CORS ポリシーをチェックします。
  • 「No Access-Control-Allow-Origin」 というエラーが出ると、PDF がブロックされます。
  • 対策
    • サーバーで Access-Control-Allow-Origin: *（または自サイトドメイン）を設定。
    • あるいはプロキシ経由で自サイトから読み込む。

5.2 CSP（Content Security Policy）

  • CSP が frame-src や child-src を制限していると、PDF が iframe で読み込めないことがあります。
  • 解決策
    • script-src 'self' と frame-src 'self' を許可する。
    • frame-src に PDF のホストドメインを追加する。

6. JavaScript での「別タブで PDF を開く」テクニック

ブラウザの設定を変更できない／変更したくない場合、JavaScript で動的に PDF を開く方法を紹介します。

<a href="docs/sample.pdf" class="auto-open-pdf">PDFを読む</a>

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.auto-open-pdf').forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault(); // デフォルトのリンク動作を抑制
      // Window オプションをカスタマイズ（必要に応じて）
      window.open(link.href, '_blank', 'noopener,noreferrer');
    });
  });
});
  • noopener と noreferrer はページが新しいタブの window.opener にアクセスできないようにし、セキュリティを向上させます。
  • さらに、download 属性が付いているリンクの場合はそれを除去しておくと、ブラウザがダウンロードではなく表示を試みます。

7. PDF ビューワーの拡張機能やアドオンは要注意

ブラウザに PDF を拡張機能で扱わせている場合、target="_blank" が無視されることがあります。

  • Chrome / Edge: 「Adobe Acrobat」などの拡張がインストールされていると、PDFがアプリで開くようになります。
  • Firefox: 「PDF Viewer」を無効化すると組み込み PDF.js に切り替わります。

対策

  • 拡張機能を一時的に無効化して挙動を確認します。
  • もし拡張が必要であれば、設定で「外部で開く」または「ブラウザ内で開く」オプションを選びます。

8. よくあるトラブルとその対処法

トラブル 原因 具体策
PDF が同じタブで表示される target="_blank" が無効化されている ブラウザ設定で PDF を自動ダウンロードしないように設定、またはサーバー側 Content-Disposition: inline に変更
PDF がダウンロードされる サーバーで Content-Disposition: attachment が追加されている attach を inline に変更、あるいはサーバー側レスポンスヘッダーを確認
ブラウザが「PDF ファイルをダウンロードするにはどうすればよい。」と表示 PDF が別ドメインにホストされている CORS ヘッダー Access-Control-Allow-Origin を追加、もしくは同一ドメインに置く
PDF が空白ページで開く MIME type が間違っている サーバー側で Content-Type: application/pdf を適切に返すように設定
エラー「This PDF cannot be displayed.」 CSP で frame-src が制限されている CSP を緩めるか、PDFを別タブで開く方法に切替

9. まとめ

  1. HTML: <a href="file.pdf" target="_blank" rel="noopener noreferrer">PDF</a>
  2. ブラウザ設定
    • Chrome/Edge: PDFファイルを自動でダウンロードする をオフ
    • Firefox: PDF を閲覧する をオン / browser.helperApps.neverAsk.openFile に PDF を設定
  3. サーバー設定: Content-Disposition: inline
  4. CORS/CSP: 必要なヘッダーを追加
  5. JavaScript: タブ開く処理を自前で実装

これらの手順を踏めば、ほぼ確実に PDF を別タブ（ウィンドウ）で開くことができます。
ウェブサイトを訪れたユーザーが途中でページを失うことなく、スムーズに資料を閲覧できるようになれば、ユーザー体験は大幅に向上します。ぜひ各ブラウザごとの「設定」やサーバー側のヘッダーをチェックして、正しく設定してください。

コメント