angularjs - ejemplo - ng-if

¿Cómo obtener el nombre de un archivo descargado con Angular $ http?

Question

He escrito un código que utiliza Angular $ http para descargar un archivo. El nombre del archivo no se especifica en la URL. La URL contiene un identificador único para el archivo, que se obtiene desde fuera de la aplicación.

Cuando se $http.get(myUrl) , todo funciona bien; el archivo se recupera y puedo acceder a él en mi controlador de devolución de llamada, pero no puedo ver cómo obtener el nombre del archivo. Capturando la respuesta cruda con Fiddler, veo esto:

HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 54
Content-Type: application/octet-stream
Server: Microsoft-IIS/8.5
Access-Control-Allow-Origin: http://www.example.com/getFile/12345
Access-Control-Allow-Credentials: true
Content-Disposition: attachment; filename=testfile.txt
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 09 Oct 2015 20:25:49 GMT

Lorem ipsum dolar sit amet!  The contents of my file!

De lo anterior, queda claro que el servidor está devolviendo el nombre del archivo en la "Disposición de contenido", pero no he encontrado de ninguna manera el acceso al mismo dentro de mi devolución de llamada angular. ¿Cómo obtengo el nombre del archivo de los encabezados?

Edite en respuesta a la respuesta a continuación: Debería haber mencionado antes que ya probé response.headers() . Devuelve el Object {content-type: "application/octet-stream", cache-control: "private"} , así que todavía no obtengo Content-Disposition por algún motivo. response.headers(''Content-Disposition'') devuelve null .

Answer 1

API web: encontré que agregar la siguiente línea de código en el método ExecuteAsync (...) de mi implementación IHttpActionResult funcionó ( ''respuesta'' es el HttpResponseMessage que se devolverá):

response.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");

Angular: Entonces pude resolver el nombre de archivo en angular de la siguiente manera ( "respuesta" es la promesa resuelta de $ http.get):

var contentDisposition = response.headers(''Content-Disposition'');
var filename = contentDisposition.split('';'')[1].split(''filename'')[1].split(''='')[1].trim();

Answer 2

Puede que valga la pena mencionar que para obtener el nombre de archivo de los encabezados HTTP, extraer el encabezado Content-Disposition no es suficiente. Aún debe obtener la propiedad de filename de este valor de encabezado.

Ejemplo de valor de encabezado devuelto: attachment; filename="myFileName.pdf" attachment; filename="myFileName.pdf" .

La siguiente función extraerá el filename="myFileName.pdf" , luego extraerá "myFileName.pdf" y finalmente eliminará las comillas adicionales para obtener myFileName.pdf .

Puede utilizar el siguiente fragmento de código:

  function getFileNameFromHttpResponse(httpResponse) {
      var contentDispositionHeader = httpResponse.headers(''Content-Disposition'');
      var result = contentDispositionHeader.split('';'')[1].trim().split(''='')[1];
      return result.replace(/"/g, '''');
  }

Answer 3

Si response.headers(''Content-Disposition'') devuelve un valor nulo, use response.headers.**get**(''Content-Disposition''); .

El resto del fragmento de @andrew ahora funciona muy bien.

Answer 4

Si usa CORS, debe agregar "Access-Control-Expose-Headers" a los encabezados de respuesta en el lado del servidor. Por ejemplo: Access-Control-Expose-Headers: x-filename, x-something-else

Answer 5

Similar a algunas de las respuestas anteriores, pero usar un RegEx básico es cómo lo resolví en su lugar:

let fileName = parseFilenameFromContentDisposition(response.headers(''Content-Disposition''));

function parseFilenameFromContentDisposition(contentDisposition) {
    if (!contentDisposition) return null;
    let matches = /filename="(.*?)"/g.exec(contentDisposition);

    return matches && matches.length > 1 ? matches[1] : null;
}

Answer 6

Tal vez usted ya encuentre una solución, pero publicaré esta respuesta si alguien más tiene este problema.

Agregue estos parámetros en la función de devolución de llamada exitosa desde la solicitud $ http:

    $http.get(myUrl).success(function (data, status, headers, config) {
        // extract filename from headers(''Content-Disposition'')
    });

Answer 7

Utilice response.headers para obtener encabezados de respuesta http:

$http.get(myUrl).then(function (response) {
    // extract filename from response.headers(''Content-Disposition'')
} 

Answer 8

success(function(data, status, headers, response,xhr) {
    console.log(headers(''Content-Disposition''));
}