u-ryo's blog

various information for coding...

Downloading a File on Angular

| Comments

JHipsterのAngularでfileをdownloadするUIを作っていました。 AタグlinkからserverのAPI叩いて、 Content-Disposition: attachment;filename=... と返せば済むだろう、 と思ってたんですが、そういえば認証通さねばなりません。 となると一旦browserで全部受けてblobにしてから返さないとならなさそうです。 認証header自体は、JHipsterならHTTPのinterceptorがあって、 フツーにthis.http.get(...)とかすれば勝手に付けてくれます。 HTTP Headerの付け方は公式documentにある通りです。 Angular 2 download .CSV file click event with authenticationを参考に、 service化しました。 FileSaver.jsを使うと楽そうですけど、 そんなに互換性が重視されるわけではないことと大したcode量ではないことから、 自分で書きました。 最後、window.open(url);だとwindowが上がってきてしまうので、 AngularでCSVをAPIからDLするときに色々したお話にあるように、 裏で自分で<a href="...">作って自分で叩いて自分で消す、 というように書いたら、うまく行きました。

Comments