如何使用Angular JS从Web API(.Net)下载字节数组(byte [])

时间:2018-07-03 15:08:26

标签: javascript c# asp.net .net asp.net-web-api

我正在与SOA架构师合作解决方案,但是在WS层上以字节数组转换.zip文件并通过表示层的Web API下载时遇到了问题。

zip文件下载成功,但是无法解压缩文件。 让我用代码解释一下:

业务层

业务层上,我们定义了一种方法,该方法可以转换字节数组上的文件zip

//This method is defined on business layer and exposed on WS in WCF Layer
//Class: BusinessLayer
public byte[] convertingZip(){
    try{
        pathFile = "directoryOnServer/myZipFile.zip"
        byte[] arr = File.ReadAllBytes(pathFile);
        return arr; 

    }catch(Exception ex){ /*Do something*/ }

}

WCF服务层

WCF服务层上,我们编写了一种方法,该方法返回数组字节并将其公开

//Class: ServiceLayer
public  byte[] getByteArray(){
    try{
        BusinessLayer blObject = new BusinessLayer();
        return blObject.convertingZip();    
    }catch(Exception ex){ /*Do something*/ }
}

Web API

Web API项目上,我们编写了一种使用WCF服务层并将字节数组返回到内容的方法

//This controller must be return the zip file
[HttpGet]
[AuthorizeWebApi]
[Route("downloadZip")]
public async Task<IHttpActionResult> downloadZipFile(){
    try{
        using(ServiceLayer services = new ServiceLayer()){
            arr = services.getByteArray();

            var result = new HttpResponseMensage(HttpStatusCode.OK){
                Content = new ByteArrayContent(arr); }

            result.Content.Headers.ContentDisposition 
               = new ContentDispostionHeaderValue("attachment"){
                FileName = "zip-dowload.zip" };

            result.Content.Headers.ContentType 
               = new MediaTypeHeaderValue("application/octec-stream");

            var response = ResponseMessage(result);
            return result;
        }
    }cacth(Exception ex){ /*Do something*/ }
}

演示层

表示层上,我下载了带角度JS 1.6.5的文件

//On Web App project  consume the WebApi with Angular
//MyController.js

$scope.DonwloadZip = function(){
$http.get('api/myControllerUrlBase/downloadZip')
    .success(function(data, status, headers, config){
            if(status === true && data != null){
                var file = new Blob([data], {type: "application/zip"});
                var fileURL = URL.createObjectUrl(file);
                var a = document.createElement(a);
                a.href = fileURL;
                a.target = "_blank";
                a.download = "MyZipFileName.zip";
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }else { /*Do something */}
    })
    .error(function(data, status, headers, config) {
            //show error message
    });
}

我不确定这样做是否正确。我用.xml,.txt测试了一些类似的东西。和.csv文件并可以正常工作。但是请不要使用zip文件。

然后,将zip文件转换为字节数组并从Web应用程序项目中获取Web API的正确方法是什么?

我将非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

好吧,我已经解决了这个问题,我想分享解决方案。

中心问题在web-api和表示层上,因此我们需要在此处修改代码:

Api控制器上,将字节数组转换为base64上的字符串并发送http响应内容

[HttpGet]
[AuthorizeWebApi]
[Route("downloadZip")]
public async Task<IHttpActionResult> downloadZipFile(){
    try{
    //Using WS reference
        using(ServiceLayer services = new ServiceLayer()){

        //Catch the byte array
        arr = services.getByteArray();

        //Encode in base64 string
        string base64String = System.Convert.ToBase64String(arr, 0, arr.length);    

        //Build the http response       
            var result = new HttpResponseMensage(HttpStatusCode.OK){
                Content = new StringContent(base64String); }

            result.Content.Headers.ContentDisposition 
               = new ContentDispostionHeaderValue("attachment"){
                FileName = "zip-dowload.zip" };

            result.Content.Headers.ContentType 
               = new MediaTypeHeaderValue("application/octec-stream");

            var response = ResponseMessage(result);
            return result;
        }
    }cacth(Exception ex){ /*Do something*/ }
}

Angular Controller 上,没有在Blob上转换数据响应,定义有关数据响应的元数据并下载:

$scope.DonwloadZip = function(){
$http.get('api/myControllerUrlBase/downloadZip')
    .success(function(data, status, headers, config){
            if(status === true && data != null){

                //No convert data on Blob
                var fileURL = 'data:application/octec-stream;charset=utf-8;base64,'+ data;
                var a = document.createElement(a);
                a.href = fileURL;
                a.target = "_blank";
                a.download = "MyZipFileName.zip";
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }else { /*Do something */}
    })
    .error(function(data, status, headers, config) {
            //show error message
    });
}

请记住,如果您使用的是Angular 1.6.5或更高版本,则http请求必须类似于:

   $http({
      method: 'GET',
      url: 'api/myControllerUrlBase/downloadZip'
   }).then(function (response){
       //Success
   },function (error){
       //Error
   });

希望对某人有用,谢谢尝试!