【JavaScript】HTMLファイルと同じ場所にあるCSVファイルをダウンロードする方法

2025/04/13

ウェブサイトで、HTMLファイルと同じフォルダに置いたCSVファイルをユーザーにダウンロードしてもらいたいと思った時に使える、シンプルなJavaScriptのコードをご紹介します。特別なサーバーサイドの処理は一切不要で、フロントエンドだけで完結するので手軽に実装できます。

1 今回のターゲットファイル
2 HTMLにボタンを設置
3 JavaScript側のコード
4 解説ポイント

今回のターゲットファイル

今回の例では、あなたのHTMLファイルと同じフォルダに data.csv という名前のCSVファイルがあることを想定しています。

your_website_folder/
├── index.html
└── data.csv   &amp;lt;-- これをダウンロードさせます！

HTMLにボタンを設置

まずは、ダウンロードボタンを設置するHTMLと、ダウンロード処理を行うJavaScriptの基本的なコードを見ていきましょう。

<button onclick="downloadCSV()">CSVファイルをダウンロード</button>

JavaScript側のコード

function downloadCSV() {
   fetch('data.csv') // HTMLと同じフォルダにある data.csv を指定
   .then(response => {
      if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.text();
   })
   .then(csvText => {
      // BOM（Byte Order Mark）を削除（文字化け対策）
      const bomRemovedText = csvText.charCodeAt(0) === 0xFEFF ? csvText.substring(1) : csvText;

      const blob = new Blob([bomRemovedText], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'data.csv'; // ダウンロード時のファイル名を指定
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url); // メモリリークを防ぐ
   })
   .catch(error => {
      console.error('CSVファイルの読み込みエラー:', error);
   });
}

解説ポイント

fetch('data.csv'): ここがポイント！fetch 関数に、ダウンロードしたいCSVファイルのパス 'data.csv' を指定しています。HTMLファイルと同じフォルダにあるため、相対パスで指定できます。
レスポンスの確認: .then(response => { ... }) の部分では、サーバーからのレスポンスが正常かどうか (response.ok) を確認しています。
テキストデータの取得: response.text() で、CSVファイルの中身をテキストデータとして取得します。
BOMの削除: CSVファイルによっては、先頭にBOM（Byte Order Mark）という特殊な符号が含まれていることがあります。これがあると、Excelなどで開いた際に文字化けすることがあるため、念のため削除しておきます。
Blobの作成: 取得したCSVテキストデータを、Blob というオブジェクトに変換します。type: 'text/csv;charset=utf-8;' で、データの種類と文字エンコードを指定しています。
一時的なダウンロードリンクの作成: URL.createObjectURL(blob) で、Blobデータへの一時的なURLを作成します。
<a>要素の作成と強制クリック: JavaScriptで <a> 要素を動的に作成し、href にBlobのURL、download 属性にダウンロード時のファイル名 (data.csv) を設定します。その後、a.click() でプログラムからリンクを強制的にクリックし、ダウンロードを開始させます。
後処理: ダウンロードが完了したら、作成した <a> 要素とBlob URLを削除して、メモリリークを防ぎます。
エラー処理: .catch(error => { ... }) の部分で、CSVファイルの読み込みに失敗した場合のエラー処理を行っています。

- HTML/JavaScript