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

kcrjzv8t  于 2023-01-31  发布在  .NET
关注(0)|答案(2)|浏览(117)

我正在与SOA架构师合作一个解决方案,在WS层转换字节数组中的.zip文件并通过Web API从表示层下载时遇到了问题。
zip文件下载成功,但无法解压缩文件。让我用代码解释一下:

业务层

business layer 上,我们定义了一个方法,用于将文件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

在 * 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*/ }
}

表示层

在 * 表示层 * 上,我下载了带有Angular 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?
我将非常感激你的帮助。

gdx19jrr

gdx19jrr1#

好吧,我已经解决了这个问题,我想分享解决方案。
中心问题是在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 控制器上,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
   });

我希望这是有用的人,谢谢尝试帮助!

6ie5vjzr

6ie5vjzr2#

我可以从下面的方法实现这一点

downloadFile(base64: string,filename: string, mimetype: string) {
var fileURL = 'data:application/octec-stream;charset=utf-8;base64,' + base64;
var a = document.createElement('a');
a.href = fileURL;
a.target = "_blank";
a.download = filename + ".pdf";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

}
〈a [href]=“文件URL”(单击)=“下载文件(类型.基本64字符串,类型.名称,类型.扩展名)"〉{{类型.名称}}

相关问题