【JavaScript】ファイルをダウンロードする方法｜Blob URL・CSV / JSON 生成・fetch + Blob・ファイル名指定・CORS 対策まで解説

<!-- download 属性でファイル名を指定 -->
<a href="/files/report.pdf" download="レポート.pdf">PDFをダウンロード</a>

<!-- download 属性のみ（ファイル名はサーバーのファイル名） -->
<a href="/files/data.csv" download>CSVをダウンロード</a>

function downloadFromUrl(url, filename) {
  const a = document.createElement("a");
  a.href = url;
  a.download = filename || "";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

// 使用例
document.getElementById("downloadBtn").addEventListener("click", () => {
  downloadFromUrl("/files/report.pdf", "レポート.pdf");
});

function downloadText(text, filename) {
  const blob = new Blob([text], { type: "text/plain" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();

  // メモリ解放
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// 使用例
downloadText("Hello, World!", "hello.txt");

function downloadCSV(data, filename = "data.csv") {
  // ヘッダー行
  const headers = Object.keys(data[0]);
  const csvRows = [
    headers.join(","),
    ...data.map(row =>
      headers.map(h => {
        const val = String(row[h] ?? "");
        // カンマや改行を含む場合はダブルクォートで囲む
        return val.includes(",") || val.includes("\n")
          ? `"${val.replace(/"/g, '""')}"`
          : val;
      }).join(",")
    )
  ];

  // BOM 付き UTF-8（Excel で文字化けしない）
  const bom = "\uFEFF";
  const blob = new Blob([bom + csvRows.join("\n")], { type: "text/csv" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// 使用例
const users = [
  { name: "田中", age: 30, city: "東京" },
  { name: "鈴木", age: 25, city: "大阪" },
  { name: "佐藤", age: 35, city: "名古屋" }
];
downloadCSV(users, "ユーザー一覧.csv");

function downloadJSON(data, filename = "data.json") {
  const json = JSON.stringify(data, null, 2);
  const blob = new Blob([json], { type: "application/json" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// 使用例
downloadJSON({ name: "田中", age: 30 }, "user.json");

async function downloadFile(url, filename) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);

  const blob = await res.blob();
  const blobUrl = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = blobUrl;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(blobUrl);
}

// 使用例: APIから認証付きでファイルを取得
async function downloadReport() {
  const res = await fetch("/api/report", {
    headers: { Authorization: "Bearer " + token }
  });
  const blob = await res.blob();
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "report.pdf";
  a.click();
  URL.revokeObjectURL(url);
}

function download(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// テキスト
download(new Blob(["Hello"], { type: "text/plain" }), "hello.txt");

// CSV
download(new Blob(["\uFEFFname,age\n田中,30"], { type: "text/csv" }), "data.csv");

// JSON
download(new Blob([JSON.stringify(data)], { type: "application/json" }), "data.json");

const canvas = document.getElementById("myCanvas");

document.getElementById("saveBtn").addEventListener("click", () => {
  canvas.toBlob(blob => {
    download(blob, "drawing.png");
  }, "image/png");
});

function exportTableToCSV(tableId, filename = "table.csv") {
  const table = document.getElementById(tableId);
  const rows = [...table.querySelectorAll("tr")];

  const csv = rows.map(row =>
    [...row.querySelectorAll("th, td")]
      .map(cell => `"${cell.textContent.replace(/"/g, '""')}")`)
      .join(",")
  ).join("\n");

  download(
    new Blob(["\uFEFF" + csv], { type: "text/csv" }),
    filename
  );
}

document.getElementById("exportBtn").addEventListener("click", () => {
  exportTableToCSV("dataTable", "エクスポート.csv");
});

const btn = document.getElementById("downloadBtn");

btn.addEventListener("click", async () => {
  btn.disabled = true;
  btn.textContent = "ダウンロード中...";

  try {
    const res = await fetch("/api/export");
    const blob = await res.blob();
    download(blob, "export.xlsx");
  } catch (err) {
    alert("ダウンロードに失敗しました");
  } finally {
    btn.disabled = false;
    btn.textContent = "ダウンロード";
  }
});