AngularでCSVをAPIからDLするときに色々したお話
業務用のアプリケーション作ってるときに大概あるのがCSV出力ですが
WEBでCSV出力するときに、ちょいとはまったのでメモがてらに記事投稿します。
記事投稿時のAngularはV4です。
「IEで」下図のような感じで動くのを作ります
エクスポートしたCSVどうやってWEBで受け取るの？
一番単純な方法はAPIのURLを叩くのみですね。
window.location.href = "CSVを出力するAPIのURL";
CSVのレスポンスがあれば勝手にDLが始まります。
ただ、Chromeとかだと問題ないのですが
IEとかEdgeとかだと、utf-8のFormatでDLしようとしやがるので
場合によっては(shift-jisのファイルとか…)文字化けします。
こんな感じで…
あと、上記の方法だとビジネスロジックのエラー発生時にハンドリングしづらいです。
対策
受け取ったCSVデータからBLOBオブジェクトを生成
そいつに名前をつけてやる形で日本語名称の文字化けを解消します。
TypeScriptのAPIの受け口は下記のように作ります。
参考
readyStateが完了したとき、どのような状態で返却されたかによってresponseTypeを決定します。
(BLOBのままだとresponseTextでエラー吐いて使えないですからね)
WebAPI側では、ビジネスロジックエラーが発生した場合、InternalServerErrorのステータスで返却しています。
BLOB化したあとはCSVファイルとしてDLさせます。
ただ、IE系列とそれ以外とでロジックがちがうので下記のような感じなります。
最後に
今回作成したソースは下記リポジトリで管理しています。
