ブラウザ上でCSVを生成してダウンロードする

ブラウザ上でCSVを生成してダウンロードする

July 10, 2022

ユーザに CSV ファイルをダウンロードさせたいとします。

最初に思いつく方法は、CSV ファイルを作成してどこかのオンラインストレージに配置し、そこからダウンロードさせるというものでしょう。

わざわざオンラインストレージを使わずともブラウザだけで完結させることも可能です。

例えば、次の文字列をブラウザのアドレス欄に入力して Enter を押してみてください。

data:text/csv;charset=utf-8,NAME,GREET%0AJane,Hello%0AJohn,Bye

このような CSV ファイルがダウンロードできたはずです。

| ---- | ----- |
| NAME | GREET |
| ---- | ----- |
| Jane | Hello |
| ---- | ----- |
| John | Bye   |
| ---- | ----- |

プログラム内で上記を作成したい場合、例えば下記のコードで実現できます。（先のものから CSV データの内容を少し変えています。）

const newLineCode = "\n"; // '\n', '\r' or '\r\n'

const scheme = "data:text/csv;charset=utf-8,";

const headerBase = ["NAME", "AGE", "NATIONALITY"];

const bodyBase = [
  ["Alice", 20, "UK"],
  ["Bob", 18, "US"],
  ["Charlie", 23, "JP"],
];

const header = headerBase.join(",") + newLineCode;

const body = bodyBase.map((row) => row.join(",") + newLineCode).join("");

const data = encodeURI(scheme + header + body);

console.log(data);
// 👉 data:text/csv;charset=utf-8,NAME,AGE,NATIONALITY%0AAlice,20,UK%0ABob,18,US%0ACharlie,23,JP%0A

上記を出力結果をアドレス欄に入力すればさきほどと同じようにダウンロードが可能です。

あるいはそのままダウンロードさせたいのであれば window.open() を使っても良いでしょう。

window.open(data);

FYI #