JavaScriptで FetchしたDataをファイルに書き込んで Downloadする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで FetchしたDataをファイルに書き込んで Downloadする方法について解説していきます。

1 JavaScriptで FetchしたDataをファイルに書き込んで Downloadする方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

JavaScriptで FetchしたDataをファイルに書き込んで Downloadする方法

JavaScriptで FetchしたDataをファイルに書き込んで Downloadするには、

次のような関数を使用します。

JSON_Data_取得する通信処理_Function
取得したJSON_Data を Downloadする_Function

次のSampleCodeを実行すると、取得したJSONデータが書き込まれた example.txt という Textファイルを Downloadすることができます。

// JavaScriptで、FetchしたDataを ファイルに書き込んで、Downloadする方法

// 1. JSON_Data_取得する通信処理_Function
async function fetchJsonData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/");
  const textJsonData = await response.text();
  console.log("response.text():", textJsonData);
  return textJsonData;
}

const data = await fetchJsonData();
console.log("data", data);
console.log("data_type", typeof data);

// 2. 取得したJSON_Data を Downloadする_Function
function downloadTextFile(text, filename) {
  const element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);

  element.style.display = "none";
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

const filename = "example.txt";
downloadTextFile(data, filename);

// [ おまけ ]
// 3. JSON_Data を JavaScript_Object に フォーマットするなら、VSCodeで、jsファイルに 貼り付けて保存で、OK！

// => Formatterを設定しているなら、自動整形されます