はじめに
フロント(React)でcsvダウンロードを実装する機会があったため、備忘録です。
どうぞご活用ください。
実装
const handleDLcsv = async () => {
//アイテムの定義
const download_items = [
{'id': 1, 'name': 'apple', 'price': 100},
{'id': 2, 'name': 'orange', 'price': 120},
{'id': 3, 'name': 'melon', 'price': 800}
];
//csvヘッダー
const array_data = [['id', 'name', 'price']];
//文字コード
const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
//csv用データ作成
download_items.map((item) => {
const item_data = [item.id, item.name, item.price];
array_data.push(item_data);
})
let csv_data = array_data.map(function(l){return l.join(',')}).join('\r\n');
//BLOB生成してダウンロード実行
const blob = new Blob([bom, csv_data], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'csv_file.csv';
const clickHandler = () => {
setTimeout(() => {
URL.revokeObjectURL(url);
a.removeEventListener('click', clickHandler);
}, 150);
};
a.addEventListener('click', clickHandler, false);
a.click();
}
↧