35

AngularJS と Spring を使用してアプリケーションを作成しています。サーバーにリクエストを送信し、コントローラーから返されたレスポンスをファイルとしてダウンロードしたいと思います。コントローラーには、csvファイルのコンテンツ（文字列として）、つまり1;2;3;4（1行、4列）があります。この応答をファイルとしてダウンロードする最も簡単な方法は何ですか?

以下に、簡略化したコードを掲載しました。春のコントローラーで：

@RequestMapping(value = "/csv", method = GET)
@ResponseBody
public String getCsvFile() {
    return getCsvContent();
}

JavaScript（AngularJS）で

return $http({method: 'GET', url: 'csv/'});

ヘッダーを設定して（以下）応答ストリームにも書き込もうとしていましたが、クライアント側では、ダウンロードするファイルとしてではなく、常にこのコンテンツを文字列として取得します。

@RequestMapping(value = "/csv", method = GET)
@ResponseBody
public void getCsvFile(HttpServletResponse response) {
    response.setContentType("application/csv");
    response.setHeader("Content-Disposition", "attachment; filename=file.csv");
    response.setContentLength(getCsvContent().getBytes().length);
    ServletOutputStream out = response.getOutputStream();
    out.write(getCsvContent());
    out.flush();
    out.close();
}

クライアント側で応答をファイルとしてダウンロードするために、コントローラーのメソッドを正しく記述する方法を知っている人はいますか?

4

7 に答える 7

26

XHR リクエストを介してファイルをダウンロードすることはできません (これは、Angular がリクエストを作成する方法です)。ajax リクエストを使用してファイルをダウンロードする方法がないのはなぜですか?を参照してください。URL にアクセスする$window.openか、ここに示す iframe トリックを実行する必要があります: JavaScript/jQuery to download file via POST with JSON data

于 2013-06-18T20:51:48.640 に答える
8

私は自分でこれに取り組み、サーバーから機能させようとしました。できませんでした。その代わり...

  1. @ dnc253の回答を明確にするために$window.open(URL)、Angularアプリケーションに特定のURLを別のウィンドウで開かせる方法があります。(これは実際にはユニバーサルのテスト可能な角度プロキシですwindow.open()。)これは優れたソリューションであり、履歴を保存し、ファイルをダウンロードして、サポートされている場合は新しいブラウザー ウィンドウでレンダリングする可能性があります。しかし、ポップアップ ブロッカーに遭遇することが多く、これは信頼性にとって大きな問題です。多くの場合、ユーザーは自分で何が起こっているのか理解していません。そのため、現在のウィンドウでファイルをすぐにダウンロードすることを気にしない場合は、同様に効果的なユニバーサル JavaScript メソッドを使用できます。location.href = "uriString"、それは私にとって魅力のように機能します。Angular は、何かが起こったことさえ認識していません。POST/PUT 操作が完了したら、promise ハンドラーで呼び出します。必要に応じて、呼び出す URL を POST/PUT に返させます (まだ推測できない場合)。PUT/POST に応答してダウンロードしたかのように、ユーザーに対して同じ動作が得られます。例えば：

    $http.post(url, payload).then(function(returnData){
    var uriString = parseReturn(returnData);
    location.href="uriString"
})

  2. 実際、XHR リクエストから何かを直接ダウンロードすることはできますが、それには HTML5 ファイル API の完全なサポートが必要であり、ユーザーがファイルを利用できるようにする前に、ファイルに対してローカル変換を実行する必要がない限り、通常は必要以上に面倒です。 . (残念ながら、その詳細を提供する時間はありませんが、使用に関する他の SO 投稿があります。)

于 2014-01-06T02:27:35.560 に答える
2

必要な場合に備えて、役立つリンクをいくつか紹介します。

  1. angular jsのWeb APIからcsvファイルをダウンロードします
  2. サーバーの操作なしで JavaScript データを CSV ファイルにエクスポートする

乾杯

于 2014-02-19T03:39:54.593 に答える