Archivos binarios corruptos-Cómo descargar archivos binarios con AngularJS

download angularjs-http

Question

descargar cualquier archivo usando ResponseEntity con angular no funciona

Necesito descargar un archivo usando angular en el lado del cliente, este archivo puede tener cualquier formato, podría ser un pdf o excel o una imagen o txt ... mi método funciona solo para archivos txt y me da un formato fallido para excel e imagen y para el pdf da un pdf vacío.

así que en mi controlador aquí está la función que llama al método de servicio:

    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;
        });
    }

y mi service.js tiene:

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

this.downloadFile = function(file,urlDir) {

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

Y mi método de servicio es este:

@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;
}

¿podrías echar un vistazo y decirme qué me perdí?

Graciaaas :)

Answer 1

Cómo descargar archivos binarios con AngularJS

Al descargar archivos binarios, es importante establecer el 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;
        }); 
    }; 
}]);

Si se omite el responseType la API XHR se convierte por defecto en la conversión UTF-8 texto codificado UTF-8 a DOMString (UTF-16) que dañará el PDF, la imagen y otros archivos binarios.

Para obtener más información, consulte la referencia de la API web de MDN - XHR ResponseType

Answer 2

No sé mucho sobre el back-end, pero proporcionaré lo que he usado, puede ser útil, por lo que en el archivo de script 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(...

Y en su backend, asegúrese de que su servicio web produzca flujo de octetos y devuelva el archivo en formato de datos base64, hice esto usando Java JAX-RS de esta manera:

@POST
@Path("/downloadfile")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response downloadFile(...){
  String base64String = Base64.getEncoder().encodeToString(/*here you pass your file in byte[] format*/);
  return Response.ok(base64String).build();
}