How to Download Files from an ASP.NET Web API Using AngularJS?

Download Files from an ASP.NET Web API Method using AngularJS

When developing with AngularJS, it's often necessary to download files from external sources. This can be achieved by making HTTP GET requests to Web API methods that return the desired files.

Implementing the Request in AngularJS

To initiate the download process in AngularJS, you can use the $http service to make an HTTP GET request to your Web API method. Here's an example:

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

Returning the File from the Web API Method

In your ASP.NET Web API method, you need to configure the response to indicate that the content being returned is a file for download. Here's an example:

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

Handling the Downloaded File in AngularJS

There are two methods you can use to handle the downloaded file in AngularJS:

1. Simple Download:

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

2. Ajax Binary 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
  });
}

Remember to configure your Web API method to specify the appropriate response headers, including x-filename and content-type.

By implementing these techniques, you can seamlessly download files from an ASP.NET Web API method using AngularJS, ensuring a smooth and functional user experience.

The above is the detailed content of How to Download Files from an ASP.NET Web API Using AngularJS?. For more information, please follow other related articles on the PHP Chinese website!