0

Tengo una duda. Necesito saber como descargar un archivo con angularJS y C# MVC. Ya logre guardar el archivo en una ruta aparte, pero a la hora de descargar no sé como recuperarlo. Tengo entendido que es por método GET.

Así estoy enviando el archivo:

var config = {

  headers: {
    'Content-Type': undefined
  },
  transformRequest: function(data) {
    var formData = new FormData();

    formData.append("jsonData", angular.toJson(data.jsonData));

    for (var i = 0; i < data.files.length; i++) {
      formData.append("file" + i, data.files[i]);
    }

    return formData;
  }
};

var datos = {
  jsonData: solicitud,
  files: archivo
};

$http.post('./GuardarSolicitudConArchivo', datos, config).then(successCallback, errorCallback);

2 respuestas 2

1

Para descargar un archivo vas a tener que hacer uso del Blob de javascript

AngularJS : Download Files by Sending a HTTP Request to Web API

como veras en el codigo de ejemplo, la magia se da en estas lineas

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

el stream que envie el webapi, o action, en el response sera usando por el blob para que despues se pueda forzar la descarga.

1
  • Gracias a tu respuesta di solución a mi problema muchisimas gracias, Commented el 5 abr. 2018 a las 15:21
1

Puedes utilizar una biblioteca de JavaScript llamada FileSaver

Solo llama

saveAs(archivo, 'NombreArchivo');

Solicitud completa de http:

$http.post('apiUrl', myObject, { responseType: 'arraybuffer' })
  .success(function(data) {
            var archivo= new Blob([data], { type: 'application/pdf' });
            saveAs(archivo, 'NombreArchivo.pdf');
        });

myObject es la información POST que está enviando a su API, f.ex. una orden para ser presentada como pdf

Otro Ejemplo:

Aquí tiene la solicitud angularjs http a la API que cualquier cliente tendrá que hacer.

$http({
    url : '/path/to/your/API',
    method : 'POST',
    params : {},
    headers : {
        'Content-type' : 'application/pdf',
    },
    responseType : 'arraybuffer'
}).success(function(data, status, headers, config) {
    // TODO when WS success
    var file = new Blob([ data ], {
        type : 'application/csv'
    });
    //trick to download store a file having its URL
    var fileURL = URL.createObjectURL(file);
    var a         = document.createElement('a');
    a.href        = fileURL; 
    a.target      = '_blank';
    a.download    = 'yourfilename.pdf';
    document.body.appendChild(a);
    a.click();
}).error(function(data, status, headers, config) {

});

Explicación del código:

  1. Angularjs solicita un PDF en la URL especificada.
  2. El éxito se recibe en la respuesta.
  3. Ejecutamos un truco con JavaScript en el front-end:

    • Crea una etiqueta <a> html
    • Haga clic en la etiqueta <a> del hipervínculo , usando la función click() JS

Nota: Para realizar la eliminación del enlace después de que se haya agregado al cuerpo, simplemente reemplace las últimas 2 líneas en su controlador de éxito con esto: var element = document.body.appendChild(a); a.click(); document.body.removeChild( element );

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.