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