背景

我正在開發一個Web應用程序，其中經過身份驗證的用戶可以創建事件併發送該事件的邀請。如何使用AngularJS或JavaScript，如何通過ajax下載文件？

其中一個要求是我添加一個按鈕，事件管理器可以點擊該按鈕以允許他/她下載發送的所有邀請的Excel/OOXML報告。

架構

的觀點和實際按鈕單擊事件都生活在它運行在ASP.NET MVC 4並使用大多是普通的HTML和AngularJs作爲平臺的「網絡」項目。

我也有一個BLL，DAL支持的API項目等API是.NET MVC的WebAPI，它是通過這個終端電子表格的提供者：

/// <summary>GET api/ExportInvitations/{id}</summary> 
/// <summary>Gets an OOXML invitation report by event id.</summary> 
public HttpResponseMessage Get(int id) 
{ 
    var wb = Invitation.ConstructInvitationSpreadsheet(id); 

    var result = new HttpResponseMessage(HttpStatusCode.OK); 
    var stream = new MemoryStream(); 
    wb.SaveAs(stream); 
    result.Content = new StreamContent(stream); 
    result.Content.Headers.ContentType = 
     new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); 
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = "HelloWorld.xlsx" }; 
    return result; 

}

在前端，我用這AngularJS腳本來調用構造並返回電子表格中的API端點（我總結爲簡便起見，此代碼）：

$http.get('/api/ExportInvitations/' + id).success(function(data) { 
        //do stuff 
       });

的問題

一切似乎都很好，直到用戶應該看到電子表格作爲下載出現在瀏覽器中。對API的ajax調用沒有問題，並且API返回一個電子表格，因爲它應該 - 我從來沒有看到該文件在瀏覽器底部顯示爲下載（我正在使用Chrome）。

任何幫助表示讚賞。

來源

2014-03-07 Matt Cashatt

我發現了另一個SO post答案張貼這之後不久：

無法通過AJAX本身下載，你只需要重置窗口位置。所以，與其這樣：

$http.get('/api/ExportInvitations/' + id).success(function(data) { 
        //do stuff 
       });

我只是需要這樣的：

window.location = '/api/ExportInvitations/' + id;

而這將觸發下載，而不在瀏覽器中實際更改URL。

來源

2014-03-07 14:01:16

如何使用AngularJS或JavaScript，如何通過ajax下載文件？

背景

架構

的問題

回答

相關問題