Comment télécharger des fichiers à partir d'une API Web ASP.NET à l'aide d'AngularJS ?

Télécharger des fichiers à partir d'une méthode API Web ASP.NET à l'aide d'AngularJS

Lors du développement avec AngularJS, il est souvent nécessaire de télécharger des fichiers à partir de sources externes . Ceci peut être réalisé en envoyant des requêtes HTTP GET aux méthodes de l'API Web qui renvoient les fichiers souhaités.

Implémentation de la requête dans AngularJS

Pour lancer le processus de téléchargement dans AngularJS, vous pouvez utiliser le service $http pour envoyer une requête HTTP GET à votre méthode API Web. Voici un exemple :

$scope.getthefile = function () {
  $http({
    method: 'GET',
    cache: false,
    url: $scope.appPath + 'CourseRegConfirm/getfile',
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    }
  }).success(function (data, status) {
    // Handle the downloaded file here
  }).error(function (data, status) {
    // Handle any errors that may occur
  });
}

Renvoi du fichier à partir de la méthode API Web

Dans votre méthode API Web ASP.NET, vous devez configurer la réponse pour indiquer que le contenu renvoyé est un fichier à télécharger. Voici un exemple :

[Authorize]
[Route("getfile")]
public HttpResponseMessage GetTestFile()
{
  HttpResponseMessage result = null;
  var localFilePath = HttpContext.Current.Server.MapPath("~/timetable.jpg");

  if (!File.Exists(localFilePath))
  {
    result = Request.CreateResponse(HttpStatusCode.Gone);
  }
  else
  {
    // Serve the file to the client
    result = Request.CreateResponse(HttpStatusCode.OK);
    result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
    result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
    result.Content.Headers.ContentDisposition.FileName = "SampleImg";
  }

  return result;
}

Gestion du fichier téléchargé dans AngularJS

Il existe deux méthodes que vous pouvez utiliser pour gérer le fichier téléchargé dans AngularJS :

1. Simple Télécharger :

$scope.downloadFile = function (downloadPath) {
  window.open(downloadPath, '_blank', '');
}

2. Téléchargement binaire Ajax :

$scope.downloadFile = function (httpPath) {
  $http.get(httpPath, { responseType: 'arraybuffer' })
  .success(function (data, status, headers) {
    // Handle the downloaded file here using the data
  }).error(function (data, status) {
    // Handle any errors that may occur
  });
}

N'oubliez pas de configurer votre méthode API Web pour spécifiez les en-têtes de réponse appropriés, y compris x-filename et content-type.

En mettant en œuvre ces techniques, vous pouvez en toute transparence téléchargez des fichiers à partir d'une méthode API Web ASP.NET à l'aide d'AngularJS, garantissant une expérience utilisateur fluide et fonctionnelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!