【保存版】HTMLボタン・JavaScript・Blobオブジェクトでファイルダウンロード

2024-04-02

HTMLボタンまたはJavaScriptでファイルダウンロードをトリガーする方法

方法1：HTMLのdownload属性

HTMLボタンにdownload属性を追加することで、ユーザーがボタンをクリックしたときにファイルをダウンロードさせることができます。

<button type="button" onclick="downloadFile()">ダウンロード</button>

<script>
function downloadFile() {
  const url = "https://example.com/file.txt";
  const a = document.createElement("a");
  a.href = url;
  a.download = "file.txt";
  a.click();
}
</script>

この例では、downloadFile()関数が呼び出されると、file.txtという名前のファイルがhttps://example.com/file.txtからダウンロードされます。

注意:

download属性は、一部のブラウザではサポートされていない場合があります。
ダウンロードファイルのURLは、ユーザーがアクセスできる場所に存在する必要があります。

方法2：JavaScriptのwindow.location.href

window.location.hrefプロパティを使用して、ダウンロードファイルのURLを直接指定することもできます。

<button type="button" onclick="downloadFile()">ダウンロード</button>

<script>
function downloadFile() {
  const url = "https://example.com/file.txt";
  window.location.href = url;
}
</script>

この方法は、download属性よりも古い方法です。

JavaScriptのBlobオブジェクトを使用して、ダウンロードファイルの内容を直接生成することができます。

<button type="button" onclick="downloadFile()">ダウンロード</button>

<script>
function downloadFile() {
  const data = "This is the content of the file.";
  const blob = new Blob([data], { type: "text/plain" });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "file.txt";
  a.click();
}
</script>

この例では、downloadFile()関数が呼び出されると、file.txtという名前のファイルが生成され、その中にThis is the content of the file.という文字列が保存されます。

この方法は、他の方法よりも複雑です。
ダウンロードファイルの内容は、JavaScriptコードで生成する必要があります。

HTMLボタンまたはJavaScriptを使用してファイルダウンロードをトリガーするには、いくつかの方法があります。

最も簡単な方法は、HTMLボタンにdownload属性を追加することです。
ダウンロードファイルのURLを直接指定したい場合は、window.location.hrefプロパティを使用することができます。
ダウンロードファイルの内容を直接生成したい場合は、JavaScriptのBlobオブジェクトを使用することができます。

方法1：HTMLのdownload属性

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルダウンロード</title>
</head>
<body>
  <button type="button" onclick="downloadFile()">ダウンロード</button>

  <script>
  function downloadFile() {
    const url = "https://example.com/file.txt";
    const a = document.createElement("a");
    a.href = url;
    a.download = "file.txt";
    a.click();
  }
  </script>
</body>
</html>

方法2：JavaScriptのwindow.location.href

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルダウンロード</title>
</head>
<body>
  <button type="button" onclick="downloadFile()">ダウンロード</button>

  <script>
  function downloadFile() {
    const url = "https://example.com/file.txt";
    window.location.href = url;
  }
  </script>
</body>
</html>

方法3：JavaScriptのBlobオブジェクト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルダウンロード</title>
</head>
<body>
  <button type="button" onclick="downloadFile()">ダウンロード</button>

  <script>
  function downloadFile() {
    const data = "This is the content of the file.";
    const blob = new Blob([data], { type: "text/plain" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "file.txt";
    a.click();
  }
  </script>
</body>
</html>

上記のコードはサンプルコードであり、実際の使用環境に合わせて変更する必要があります。

方法4：HTMLの<form>要素

HTMLの<form>要素を使用して、ファイルをPOSTリクエストで送信することで、ダウンロードさせることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルダウンロード</title>
</head>
<body>
  <form action="https://example.com/download.php" method="post">
    <input type="hidden" name="file" value="file.txt">
    <button type="submit">ダウンロード</button>
  </form>
</body>
</html>

この方法は、サーバー側のスクリプトが必要になります。
ダウンロードファイルは、サーバー側で用意する必要があります。

方法5：サーブレット

サーブレットを使用して、ファイルをダウンロードさせることができます。

import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DownloadServlet extends HttpServlet {

  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException {
    resp.setContentType("text/plain");
    resp.setHeader("Content-Disposition", "attachment; filename=\"file.txt\"");

    try (InputStream in = getServletContext().getResourceAsStream("/WEB-INF/file.txt");
         PrintWriter out = resp.getWriter()) {
      byte[] buf = new byte[8192];
      int len;
      while ((len = in.read(buf)) != -1) {
        out.write(buf, 0, len);
      }
    }
  }
}