JavaScriptでpdfなどのファイルダウンロード処理を行う方法

今回はJavaScriptでpdfなどのファイルダウンロード処理を行う方法を紹介します。pdf以外にもexcelや画像など、ファイルとして同じサーバー内においてあるものならダウンロードできます。

ファイルダウンロード処理の書き方
テスト環境から本番環境への移行を考慮した書き方
まとめ

ファイルダウンロード処理の書き方

一番シンプルなのは以下のような書き方です。

<button type="button" id="button">ダウンロード</button>

document.getElementById('button').addEventListener('click', () => {
  const a = document.createElement('a');
  a.href = 'ファイルのパス';
  a.download = 'ファイル名';
  a.click();  
});

ボタンをクリックしたら一時的な<a>タグを作って、そこにダウンロードしたいファイルのパスとダウンロード時のファイル名を渡してクリック処理を走らせるだけです。簡単ですね。

テスト環境から本番環境への移行を考慮した書き方

実際のWeb制作やフロントエンド開発ではテスト環境から本番環境へ反映させる作業があり、書き方に少し注意が必要です。

以下のように書く必要があります。HTMLは同じです。

document.getElementById('button').addEventListener('click', () => {
  // テスト環境から本番環境への移行を考慮
  const topPageURL = `${window.location.protocol}//${window.location.host}`; // http:(https:)//ドメイン名
  const downloadUrl = `${topPageURL}/ファイルのパス`;
  // 以下同じ
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 'ファイル名';
  a.click();  
});

window.location.protocolはサイトがSSL化しているならhttps:、していないならhttp:が入ります（コロンまで含む）。window.location.hostでホスト名（ドメインみたいなもの）を取得します。あとは同じ。

テスト環境ではテスト環境の、本番環境では本番環境のurlからダウンロードできるようにするためurlを上のように書く必要があります。ここを絶対パスでハードコーディングしちゃうとcorsエラーでファイルのダウンロードができなくなります。

僕はWordPress制作中にこれにハマって時間を溶かしました…気をつけましょうね。