AJAX 게시 응답에서 파일 다운로드를 어떻게 트리거할 수 있나요?

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 게시 응답에서 파일 다운로드를 어떻게 트리거할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!