향상된 사용자 경험을 위해 Ajax가 어떻게 파일 저장 대화 상자를 비동기적으로 트리거할 수 있습니까?

Ajax를 사용한 비동기 파일 다운로드: 파일 저장 대화 상자 잠금 해제

이 디지털 시대에 파일 다운로드는 어디에나 있습니다. Ajax의 기능을 사용하면 웹페이지 상호작용을 중단하지 않고 비동기적으로 파일 다운로드를 허용하여 사용자 경험을 향상시킬 수 있습니다.

문제

서버측 파일에 Struts2 액션을 사용할 때 다운로드 후 jQuery를 통해 작업을 호출하면 이진 스트림의 데이터가 검색됩니다. 그러나 원하는 결과는 사용자가 파일을 로컬에 저장할 수 있는 파일 저장 대화 상자를 트리거하는 것입니다.

최신 브라우저 솔루션

최신 브라우저의 경우 다음 접근 방식은 다음과 같습니다. 권장사항:

<사전>
fetch('your-download-endpoint').then(resp => resp.blob()).then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'your-file-name' // 원하는 것을 지정하세요. 파일 이름
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
});

이 코드는 blob 데이터에 대한 임시 URL을 생성한 다음 문서 본문에 추가되는 앵커 요소에 연결됩니다. 이 숨겨진 앵커 요소를 클릭하면 파일 저장 대화 상자가 트리거되고 다운로드가 완료되면 임시 URL이 취소됩니다.

고려 사항

이 접근 방식은 중소 규모 파일의 경우 매우 큰 다운로드의 경우 메모리 소비를 고려하는 것이 중요합니다. 대용량 파일이 예상되는 경우 iframe 및 쿠키 사용과 같은 대체 기술이 더 적합할 수 있습니다.

위 내용은 향상된 사용자 경험을 위해 Ajax가 어떻게 파일 저장 대화 상자를 비동기적으로 트리거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!