如何在 AJAX Post 回應中觸發文件下載？

在AJAX Post 回應中處理檔案下載

設計AJAX 應用程式時，通常會處理各種回應類型，包括JSON 和潛在回應類型的文件附件。根據 Content-Type 和 Content-Disposition 標頭偵測回應類型非常簡單。然而，觸發下載對話框可能會帶來挑戰。

幸運的是，現代瀏覽器透過 FileAPI 提供了解決方案。以下程式碼片段示範如何在AJAX post 請求中實現檔案下載：

// 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 post 請求可以無縫處理文件附件並觸發客戶端的下載對話方塊。

以上是如何在 AJAX Post 回應中觸發文件下載？的詳細內容。更多資訊請關注PHP中文網其他相關文章！