사용자 상호 작용을 중단하지 않고 Ajax를 사용하여 파일 다운로드를 트리거하려면 어떻게 해야 합니까?

Ajax로 파일 다운로드 활성화

비동기 프로그래밍 시대에는 사용자 상호작용을 방해하지 않고 파일을 다운로드해야 하는 경우가 많습니다. 이 질문은 사용자에게 파일을 로컬에 저장하라는 메시지를 표시하면서 Ajax를 사용하여 파일을 다운로드하는 방법을 탐구합니다.

제공된 Struts2 액션에서 스트림 결과를 사용하여 파일을 다운로드할 수 있습니다. 그러나 jQuery를 사용하여 이 작업에 직접 게시하면 파일이 브라우저 내에서 바이너리 스트림으로 렌더링됩니다. 파일 다운로드 창을 실행하려면 다른 접근 방식이 필요합니다.

최신 브라우저 솔루션

최신 브라우저는 보다 간단한 솔루션을 제공합니다. fetch() API를 사용하면 파일을 blob으로 검색하고 다운로드용 임시 URL을 생성할 수 있습니다.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // Set the download filename
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('File download complete!');
  })
  .catch(() => alert('File download failed!'));

이 접근 방식을 사용하려면 fetch() API 및 createObjectURL()을 지원하는 최신 브라우저가 필요합니다. 방법입니다.

위 내용은 사용자 상호 작용을 중단하지 않고 Ajax를 사용하여 파일 다운로드를 트리거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!