如何使用ASP.net Web API和Javascript下载二进制文件?

时间:2015-11-09 22:50:41

标签: javascript angularjs asp.net-web-api asp.net-apicontroller

我有一个Web API控制器,如下所示:

using System;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Web.Http;
using System.Threading.Tasks;
using System.IO;

    namespace APIIntegration.Controllers
    {
        public class TestController : ApiController
        {
            // http://localhost/api/test
            [HttpGet]        
            public async Task<HttpResponseMessage> Get()
            {
                Stream stream = streamWith256Bytes;            
                HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);            
                result.Content = new StreamContent(stream);
                result.Content.Headers.ContentLength = stream.Length;            
                result.Content.Headers.ContentType =
                    new MediaTypeHeaderValue("application/octet-stream");
                result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
                result.Content.Headers.ContentDisposition.FileName = "foo.bin";
                return result;
            }

            private static Stream streamWith256Bytes
            {
                get
                {
                    MemoryStream stream = new MemoryStream();
                    for (int i = 0; i <256 ; i++)
                    {
                        stream.WriteByte(Convert.ToByte(i));
                    }
                    stream.Position = 0;
                    return stream;
                }
            }
        }
    }

简而言之,此控制器尝试将256字节文件下载到浏览器。首先,它似乎工作,但是当检查下载的文件时,大小是512字节而不是预期的256字节,并且不可打印的字符被删除。

如何修改此代码以便正确下载二进制数据?

编辑:我还应该提一下,我在这里看到了一个类似的问题:Problems with downloading pdf file from web api service问题是通过添加内容长度标题解决的,但是没有解决这对我来说。

编辑:我修改了上面的源代码,提供了一个完整的工作示例,说明如何重现。

编辑:我发现当我输入地址栏中的地址时,上面的代码实际上可以正常工作,但是当使用Javascript启动下载时,这就是&#39; s我遇到问题的地方。

1 个答案:

答案 0 :(得分:4)

我找到了解决方案。在我的Javascript中,我使用Angular使用Angular $ http服务启动文件下载。默认情况下,此服务将响应解释为文本。我不得不告诉Angular将响应解释为blob,并修复了所有内容。

我的工作代码如下:

function download(downloadUrl) {
    $http({
        url: downloadUrl,
        responseType: "blob"
    })
    .then(function (response) {
        var blob = new Blob([response.data], { type: "application/octet-stream" });
        saveAs(blob, "foo.bin");
    }, function (response) {
        alert("error downloading file from " + downloadUrl);
    });
}