二进制文件损坏-如何使用AngularJS下载二进制文件 使用ResponseEntity和angular下载任何文件都不起作用

我需要在客户端使用angular下载一个文件， 此文件可以有任何格式，可以是pdf、excel、图像或txt。。。 我的方法只适用于txt文件，对于excel和图像，它给出了一个失败的格式，对于pdf，它给出了一个空pdf

因此，在我的控制器中，这里是调用服务方法的函数：

    vm.downloadFile = downloadFile;

    function downloadFile(file){
        var urlDir = "C://STCI//"+idpeticion;
        return VerDocServices.downloadFile(file,urlDir)
          .then(function(response) {
            var data = response.data;
            var filename = file;
            var contentType = 'application/octet-stream';//octet-stream             
            var linkElement = document.createElement('a');
            try {
                var blob = new Blob([ data ], {
                    type : contentType
                });
                var url = window.URL.createObjectURL(blob);
                linkElement.setAttribute('href', url);
                linkElement.setAttribute("download", filename);
                var clickEvent = new MouseEvent("click", {
                    "view" : window,
                    "bubbles" : true,
                    "cancelable" : false
                });
                linkElement.dispatchEvent(clickEvent);
            } catch (ex) {
                console.log(ex);
                throw ex;
            }
        }).catch(function(response) {
            alert('Se ha producido un error al exportar del documento');
            console.log(response.status);
            throw response;
        });
    }

我的service.js有：

angular.module('mecenzApp').service('VerDocServices',['$http',function($http) {

this.downloadFile = function(file,urlDir) {

    return $http.get('api/downloadFile', {
        params : {
            file : file,
            urlDir : urlDir
        }
    }); }} ]);

我的服务方式是：

@GetMapping("/downloadFile")
@Timed
public ResponseEntity<byte[]> downloadFile(@RequestParam(value = "file") String file, @RequestParam(value = "urlDir") String urlDir) {
    log.debug("GET ---------------- DOWNLOAD FILE : {}", file);
    log.debug("GET ---------------- From the DIRECTORY: {}",urlDir);

    InputStream fileStream;
    String filepath = urlDir+File.separator+file;
    try {
        File f = new File(filepath);
        log.debug("GET ---------------- FILE: {}",f.getPath());
        fileStream = new FileInputStream(f);
        byte[] contents = IOUtils.toByteArray(fileStream);
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.parseMediaType("application/octet-stream"));   
        String filename = file;
        headers.setContentDispositionFormData(filename, filename);
        ResponseEntity<byte[]> response2 = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
        fileStream.close();
        return response2;            
        
    } catch (FileNotFoundException e) {
       System.err.println(e);
    } catch (IOException e) {
        System.err.println(e);
    }
   return null;
}

@GetMapping（“/downloadFile”）
@定时
公共响应下载文件（@RequestParam（value=“file”）字符串文件，@RequestParam（value=“urlDir”）字符串urlDir）{
log.debug（“获取------------------下载文件：{}”，文件）；
debug（“从目录：{}中获取----------------”，urlDir）；
输入流文件流；
字符串filepath=urlDir+File.separator+File；
试一试{
文件f=新文件（文件路径）；
debug（“GET---------文件：{}”，f.getPath（））；
fileStream=newfileinputstream（f）；
byte[]contents=IOUtils.toByteArray（fileStream）；
HttpHeaders=新的HttpHeaders（）；
headers.setContentType（MediaType.parseMediaType（“应用程序/八位字节流”）；
字符串文件名=文件；
headers.setContentDispositionFormData（文件名、文件名）；
ResponseEntity response2=新的ResponseEntity（内容、标题、HttpStatus.OK）；
fileStream.close（）；
返回响应2；
}catch（filenotfounde异常）{
系统错误println（e）；
}捕获（IOE异常）{
系统错误println（e）；
}
返回null；
}

你能看一看，告诉我我错过了什么吗

---

谢谢你（uu:）

我对后端不太了解，但我会提供我使用过的东西，可能会有所帮助，因此在Java脚本文件中：

//your $http(request...)

.success(function (data, status, headers, config) {
  //Recieves base64 String data
  var fileName = 'My Awesome File Name'+'.'+'pdf';

  //Parsing base64 String...
  var binaryString =  window.atob(data);
  var binaryLen = binaryString.length;
  var fileContent = new Uint8Array(binaryLen);
  for (var i = 0; i < binaryLen; i++)        {
     var ascii = binaryString.charCodeAt(i);
     fileContent[i] = ascii;
  }
  var blob = new Blob([fileContent], { type: 'application/octet-stream' }); //octet-stream
  var fileURL = window.URL.createObjectURL(blob);
  $sce.trustAsResourceUrl(fileURL);  //allow angular to trust this url
  //Creating the anchor download link
  var anchor = angular.element('<a/>');
  anchor.css({display: 'none'}); // Make sure it's not visible
  angular.element(document.body).append(anchor); // Attach it to the document
  anchor.attr({
    href: fileURL,
    target: '_blank',
    download: fileName
  })[0].click();
  anchor.remove(); // Clean it up afterwards
})
//.error(function(...

如何使用AngularJS下载二进制文件 下载二进制文件时，设置

responseType

非常重要：

app.service('VerDocServices',['$http',function($http) {

    this.downloadFile = function(url, file, urlDir) {
        var config = {
            //SET responseType
            responseType: 'blob',
            params : {
                file : file,
                urlDir : urlDir
            }
         };

        return $http.get(url, config)
          .then(function(response) {
            return response.data;
        }).catch(function(response) {
            console.log("ERROR: ", response.status);
            throw response;
        }); 
    }; 
}]);

如果省略了

responseType

，则XHR API默认将编码文本转换为会损坏PDF、图像和其他二进制文件的文本

---

有关更多信息，请参见

您简直太棒了！谢谢你：你的回答解决了我的问题，excel说它是腐败的。我确实尝试了atob（），但没有Uint8array之类的东西。谢谢你分享你的知识。

app.service('VerDocServices',['$http',function($http) {

    this.downloadFile = function(url, file, urlDir) {
        var config = {
            //SET responseType
            responseType: 'blob',
            params : {
                file : file,
                urlDir : urlDir
            }
         };

        return $http.get(url, config)
          .then(function(response) {
            return response.data;
        }).catch(function(response) {
            console.log("ERROR: ", response.status);
            throw response;
        }); 
    }; 
}]);