Wie lade ich Dateien von einer ASP.NET-Web-API mit AngularJS herunter?

Dateien von einer ASP.NET-Web-API-Methode mit AngularJS herunterladen

Bei der Entwicklung mit AngularJS ist es oft notwendig, Dateien von externen Quellen herunterzuladen . Dies kann erreicht werden, indem HTTP-GET-Anfragen an Web-API-Methoden gestellt werden, die die gewünschten Dateien zurückgeben.

Implementieren der Anfrage in AngularJS

Um den Download-Prozess in AngularJS zu starten, Sie können den $http-Dienst verwenden, um eine HTTP-GET-Anfrage an Ihre Web-API-Methode zu stellen. Hier ist ein Beispiel:

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

Zurückgeben der Datei von der Web-API-Methode

In Ihrer ASP.NET-Web-API-Methode müssen Sie die Antwort so konfigurieren, dass sie angezeigt wird dass es sich bei dem zurückgegebenen Inhalt um eine Datei zum Herunterladen handelt. Hier ist ein Beispiel:

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

Verwaltung der heruntergeladenen Datei in AngularJS

Es gibt zwei Methoden, mit denen Sie die heruntergeladene Datei in AngularJS verarbeiten können:

1. Einfach Download:

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

2. Ajax-Binär-Download:

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

Denken Sie daran, Ihre Web-API-Methode zu konfigurieren Geben Sie die entsprechenden Antwortheader an, einschließlich X-Dateiname und Inhaltstyp.

Durch die Implementierung dieser Techniken können Sie nahtlos herunterladen Dateien aus einer ASP.NET-Web-API-Methode mit AngularJS, um eine reibungslose und funktionale Benutzererfahrung zu gewährleisten.

Das obige ist der detaillierte Inhalt vonWie lade ich Dateien von einer ASP.NET-Web-API mit AngularJS herunter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!