C#のWebAPIからCSVデータをダウンロードしたい

Question

前提・実現したいこと

Angular の HttpClient を使って、C# の API に GET でアクセスし、
サーバー側で生成された CSV をダウンロードしたいです。

CSVのエンコードは「shift-JIS」です。日本語が文字化けするのは困ります。。。

発生している問題・エラーメッセージ

API は FileContentResult で CSV を返却しています。
レスポンスを受け取った画面側を、どのように書けば良いのか分かりません。

該当のソースコード

下記のような処理を書いています。

【サービスクラス】

getCSV(): Observable<object> {
    const apiURL = "api/getCSV";
　　// httpはHttpClientです    
    return this.http.get(apiURL);
  }

【呼び出し元】

getCSV(): Observable<object> {
this.service.getCSV()
      .subscribe((apiResponse: any) => {
      });

試したこと

検索したところ、ファイルを blob? に変換してダウンロードさせる方法がありましたが、responseType を指定しようとしたところ、Json に変換できないとエラーが出てしまいました。

補足情報（FW/ツールのバージョンなど）

下記の環境で開発しております。

フロント：Angular7
サーバー：C#（.NET Core 2.2）

---

どなたかお解りの方がいらっしゃいましたら力を貸してくださると幸いです。
よろしくお願い致します。

Comments

[退会済みユーザー]

C# のタグは csv データの入手先が ASP.NET CORE のサイトと言うことだけの関係で、質問とは実質的に関係ないのでは？

[退会済みユーザー]

そういうものなのですね。
タグを消しました。

[Zuishin]

何が問題なのでしょう？
文字化けが問題ということですか？

[Zuishin]

https://qiita.com/qq11dev/items/85bd26b33c1ea142bf26
マルチポストなので、ヘルプを読んで適切な手続きをとってください。

[退会済みユーザー]

サーバーからダウンロードしたCSVを、画面側（Angular）でどう処理すればいいのかを知りたいです。

画面のボタンを押して、ユーザーにCSVの保存ダイアログが出るイメージです。

[退会済みユーザー]

マルチポスト失礼いたしました。
片方を消しておきます。

Answer 1

Angular とかは触ったこともありませんし、全体的に何がしたいのか質問からは見えてないのでハズレかもしれませんが・・・

Angular の HttpClient を使って、

その HttpClient というのは、ググって調べただけですが、Ajax を利用してサーバーからデータを取得してくるものと理解しています。

画面のボタンを押して、ユーザーにCSVの保存ダイアログが出るイメージです。

そして、その「保存ダイアログ」というのは IE で言うと通知バー相当のものと理解しています。

ということは、結局やりたいことは、クライアント PC のブラウザから Ajax を利用して ASP.NET CORE のサイトにアクセスして CSV ファイルをダウンロードし、ファイルとしてクライアント PC のディスクに保存したいということですか？

そうであれば、応答コンテンツを Blob（生データ）として取得し、それを保存するためのスクリプトを書く必要があります。

質問者さんが使う HttpClient で応答コンテンツを Blob（生データ）として取得できるのかどうかわかりませんが、できるのであれば：

(1) IE, Edge の場合は msSaveBlob method を使う。

(2) Chrome, Firefox, Opera の場合は URL.createObjectURL を使って Blob の URL を取得し、それを html の a 要素の href 属性に設定し、download 属性にファイル名を設定してスクリプトでクリックするようにします。

具体的には、ネイティブの XMLHttpRequest を使った例ですが、以下の記事に詳しく書いてありますので見てください。

Ajax でファイルダウンロード
http://surferonwww.info/BlogEngine/post/2019/02/05/file-download-by-using-ajax.aspx

Comments

[退会済みユーザー]

ありがとうございます。
実現したい事は、仰るとおりの内容です。
ご案内いただいたページを参考に試してみます。

Answer 2

こちらの方法で解決致しました。
ご回答くださった皆さま、ありがとうございました。

http://clc.gonna.jp/2019/03/post-2160/?fbclid=IwAR3HmruoRfWTu3Tt-V12wxbWZgnCDUsUXSAOyEWmXAujnZLHrC-4aXUJwcU

Comments

[退会済みユーザー]

それは私の回答の (2) ですよ。ブラウザが IE, Edge の場合は多分ダメ

[退会済みユーザー]

大変失礼致しました。
IE、Edge はそのままでは動作しなかったので、仰るとおり msSaveBlob を使い対応致しました。

[退会済みユーザー]

私の回答および紹介した記事では解決につながらず、自分で参考になる記事を探したということのように見えます。

私の回答と紹介した記事のどういう点が不足だったのか教えていただけると幸いです。

[退会済みユーザー]

返信が遅くなり大変申し訳ございません。

私の都合によるものですので、不足があったわけではございません。
解決方法を教えてくださりありがとうございました。

作成していたソースの他の箇所が、XMLHttpRequest を使った方式ではなかったため、
処理を合わせる為、他の方法で解決したという顛末です
誤解を招くようで申し訳ございませんでした。