はまったりひらめいたり…とか…

.Net系プログラムで勉強したこととか嵌ったことについて書いたりします。

AngularでCSVをAPIからDLするときに色々したお話

業務用のアプリケーション作ってるときに大概あるのがCSV出力ですが

WEBでCSV出力するときに、ちょいとはまったのでメモがてらに記事投稿します。

記事投稿時のAngularはV4です。

IEで」下図のような感じで動くのを作ります

f:id:TakasDev:20170615123619g:plain

エクスポートしたCSVどうやってWEBで受け取るの?

一番単純な方法はAPIのURLを叩くのみですね。

window.location.href = "CSVを出力するAPIのURL";

CSVのレスポンスがあれば勝手にDLが始まります。

ただ、Chromeとかだと問題ないのですが

IEとかEdgeとかだと、utf-8のFormatでDLしようとしやがるので

場合によっては(shift-jisのファイルとか…)文字化けします。

こんな感じで…

f:id:TakasDev:20170615122428p:plain

あと、上記の方法だとビジネスロジックのエラー発生時にハンドリングしづらいです。

対策

受け取ったCSVデータからBLOBオブジェクトを生成

そいつに名前をつけてやる形で日本語名称の文字化けを解消します。

TypeScriptのAPIの受け口は下記のように作ります。

参考

github.com

webapi.ts - CSVImportするやつ

readyStateが完了したとき、どのような状態で返却されたかによってresponseTypeを決定します。

(BLOBのままだとresponseTextでエラー吐いて使えないですからね)

WebAPI側では、ビジネスロジックエラーが発生した場合、InternalServerErrorのステータスで返却しています。

BLOB化したあとはCSVファイルとしてDLさせます。

ただ、IE系列とそれ以外とでロジックがちがうので下記のような感じなります。

component - CSVをエクスポートするやつ

最後に

今回作成したソースは下記リポジトリで管理しています。

github.com