AJAX Post Response でファイルのダウンロードをトリガーするにはどうすればよいですか?

AJAX ポスト レスポンスでのファイル ダウンロードの処理

AJAX アプリケーションを設計する場合、JSON や場合によってはファイルなどのさまざまな応答タイプを処理するのが一般的です。添付ファイル。 Content-Type ヘッダーと Content-Disposition ヘッダーに基づいて応答タイプを検出するのは簡単です。ただし、ダウンロード ダイアログをトリガーすると、問題が発生する可能性があります。

幸いなことに、最新のブラウザーは FileAPI を介してソリューションを提供します。次のコード スニペットは、AJAX ポスト リクエストでファイルのダウンロードを実装する方法を示しています。

// Using native XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
  if (this.status === 200) {
    // Retrieve the blob and filename from the response
    var blob = this.response;
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
      filenameRegex = /filename[^;=\n]*=((['"])).*?|[^;\n]*)/;
      matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // Manage file download based on browser capabilities
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // IE workaround for a known issue
      window.navigator.msSaveBlob(blob, filename);
    } else {
      var URL = window.URL || window.webkitURL;
      var downloadUrl = URL.createObjectURL(blob);
      var a = document.createElement("a");
      if (a.download !== 'undefined') {
        a.href = downloadUrl;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
      } else {
        window.location.href = downloadUrl;
      }
      setTimeout(function() { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
    }
  }
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send($.param(params, true));

jQuery.ajax を使用している場合:

$.ajax({
  type: "POST",
  url: url,
  data: params,
  xhrFields: {
    responseType: 'blob' // to avoid binary data being mangled on charset conversion
  },
  success: function(blob, status, xhr) {
    // Retrieve the blob and filename from the response
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
      filenameRegex = /filename[^;=\n]*=((['"])).*?|[^;\n]*)/;
      matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // Manage file download based on browser capabilities
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // IE workaround for a known issue
      window.navigator.msSaveBlob(blob, filename);
    } else {
      var URL = window.URL || window.webkitURL;
      var downloadUrl = URL.createObjectURL(blob);
      var a = document.createElement("a");
      if (a.download !== 'undefined') {
        a.href = downloadUrl;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
      } else {
        window.location.href = downloadUrl;
      }
      setTimeout(function() { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
    }
  }
});

これらの手法を組み込むことで、AJAX を確実に実行できます。投稿リクエストは添付ファイルをシームレスに処理し、クライアントのダウンロード ダイアログをトリガーできます。

以上がAJAX Post Response でファイルのダウンロードをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。