javascript - 如何处理 ASP .NET Api HTTPResponseMessage 以下载文件

Question

我正在阅读如何从此处的 asp.net api 下载文件的解决方案: https://stackoverflow.com/a/3605510/1881147

因此我创建了一个 API 处理程序，代码如下:

public HttpResponseMessage Post([FromBody]dynamic result)
        {

            var localFilePath = graphDataService.SaveToExcel(graphVm, graphImgUrl);
            HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
            response.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
            response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
            response.Content.Headers.ContentDisposition.FileName = "testing.xlsx";
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("MS-Excel/xls");

            return response;
            //return graphDataService.SaveToExcel(graphVm, graphImgUrl);
        }

这是我的客户端:

     $http({
            url: '/msexcel',
            method: 'post',
            params: { param: JSON.stringify(param) }
        }).success(function (data, status, headers, config) {
            console.log(data); //HOW DO YOU HANDLE the response here so it downloads?
        }).error(function (data, status, headers, config) {
            console.log(status);
        });

您如何处理成功，以便将文件下载为 .xls 文件？谢谢

Answer 1

不要将响应内容类型设置为 MS-Excel/xls，而是使用 application/octet-stream。

public HttpResponseMessage GetFile()
{
    var localFilePath = graphDataService.SaveToExcel(graphVm, graphImgUrl);
    HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
    response.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
    response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
    response.Content.Headers.ContentDisposition.FileName = "testing.xlsx";
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    response.Content.Headers.Add("x-filename", "testing.xlsx"); //We will use this below
    return response;
}

棘手的部分是如何从成功回调中的响应强制下载。一种解决方案是从响应数据创建一个 blob，然后再次下载该 blob。在 IE 中，我们可以只保存那个 blob，但对于大多数浏览器，我们需要欺骗浏览器

$http({
    method: 'GET',
    url: Url,
    responseType: 'arraybuffer',
    headers: {
        'Authorization': Token,
        'Access-Control-Allow-Origin': '*',
    }
}).success(function (data, status, headers) {
    headers = headers();

    var filename = headers['x-filename'];
    var contentType = headers['content-type'];

    try {
        var blob = new Blob([data], { type: contentType });

        //Check if user is using IE
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
        {
            window.navigator.msSaveBlob(blob, filename);
        }
        else  // If another browser, return 0
        {
            //Create a url to the blob
            var url = window.URL.createObjectURL(blob);
            var linkElement = document.createElement('a');
            linkElement.setAttribute('href', url);
            linkElement.setAttribute("download", filename);

            //Force a download
            var clickEvent = new MouseEvent("click", {
                "view": window,
                "bubbles": true,
                "cancelable": false
            });
            linkElement.dispatchEvent(clickEvent);
        }

    } catch (ex) {
        console.log(ex);
    }
}).error(function (message) {
    console.log(message);
});

注意:*只有 HTML5 支持 a 标签上的下载属性。 *我通过返回 ByteArrayContent 完成了这项工作，但 StreamContent 也应该像它一样工作 also返回二进制数据。

解决方案基于this很棒的文章，但我在此解决方案中加入了对 IE 的支持