React + FileSaver.js でダウンロード実装を行う

はじめに

Reactの活用中にjavascriptで生成したjsonであったりカンマ区切りのCSVであったりを保存するためのページを利用したいと考えたとき、いっぺんにIE,FireFox,Chrome,Safariに対応するのに骨が折れました。そんなときに、FileSaver.jsを活用して簡易に実装できたのでメモ。

FileSaver.js

IE9以下切捨て、モダンブラウザのみ対応であれば問題なく利用できます(確認済。

対応のブラウザバージョンは以下の通り

Browser Constructs as Filenames Max Blob Size Dependencies
Firefox 20+ Blob Yes 800 MiB None
Firefox < 20 data: URI No n/a Blob.js
Chrome Blob Yes 345 MiB None
Chrome for Android Blob Yes ? None
IE 10+ Blob Yes 600 MiB None
IE < 10 text/html Yes n/a None
Opera 15+ Blob Yes 345 MiB None
Opera < 15 data: URI No n/a Blob.js
Safari 6.1+* Blob No ? None
Safari < 6 data: URI No n/a Blob.js

実装

基本的にはReactで下記のコードを追加すれば動きます。
ブラウザごとの差異を吸収してくれているので手間がかからず楽です。
HTML5のBlobに対応してないブラウザでは動かないため、別途Blob.jsを利用する必要があります。
今回はモダンブラウザのみの対応を行うので割愛。

//ES6記法 React 0.14.8

import {saveAs} from 'file-saver'

/***
* @param data サーバ上から返してもらったCSV用データ
*/
downloadCsvData(data){
	//Excelで文字化けせず開けるように UTF-8用BOMを生成 
	let bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
	let blob = new Blob([bom, data], {"type": "text/csv"});
	saveAs(blob,"ダウンロード.csv")
}


安易ですが、この形式で可能です。

生のJavascriptだけで実装したい場合は、以下のページが参考になりました。

参考ページ:
http://qiita.com/wadahiro/items/eb50ac6bbe2e18cf8813

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です