AngularJS を使用して ASP.NET Web API からファイルをダウンロードする方法

AngularJS を使用した ASP.NET Web API メソッドからファイルをダウンロードする

AngularJS で開発する場合、多くの場合、外部ソースからファイルをダウンロードする必要があります。 。これは、目的のファイルを返す Web API メソッドに対して HTTP GET リクエストを行うことで実現できます。

AngularJS でのリクエストの実装

AngularJS でダウンロード プロセスを開始するには、 $http サービスを使用して、Web API メソッドに対して HTTP GET リクエストを行うことができます。次に例を示します。

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

Web API メソッドからファイルを返す

ASP.NET Web API メソッドでは、次のことを示す応答を構成する必要があります。返されるコンテンツがダウンロード用のファイルであること。以下に例を示します。

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

AngularJS でダウンロードされたファイルを処理する

AngularJS でダウンロードされたファイルを処理するために使用できる方法は 2 つあります:

1. シンプルダウンロード:

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

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

Web API メソッドを次のように構成してください。 x-filename などの適切な応答ヘッダーを指定します。 content-type.

これらの手法を実装すると、AngularJS を使用して ASP.NET Web API メソッドからファイルをシームレスにダウンロードでき、スムーズで機能的なユーザー エクスペリエンスを保証できます。

以上がAngularJS を使用して ASP.NET Web API からファイルをダウンロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。