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 중국어 웹사이트의 기타 관련 기사를 참조하세요!