jQuery.Ajax로 파일 다운로드하는 방법

질문 : jQuery.Ajax로 파일 다운로드

---

파일 다운로드를 위해 서버 측에 Struts2 작업이 있습니다.

<action name="download" class="com.xxx.DownAction">
    <result name="success" type="stream">
        <param name="contentType">text/plain</param>
        <param name="inputName">imageStream</param>
        <param name="contentDisposition">attachment;filename={fileName}</param>
        <param name="bufferSize">1024</param>
    </result>
</action>

그러나 jQuery를 사용하여 작업을 호출 할 때 :

$.post(
  "/download.action",{
    para1:value1,
    para2:value2
    ....
  },function(data){
      console.info(data);
   }
);

Firebug에서 데이터는 Binary 스트림으로 검색됩니다. 사용자가 파일을 로컬에 저장할 수 있는 파일 다운로드 창 을 여는 방법이 궁금합니다.

답변

---

2019 최신 브라우저 업데이트

이것은 몇 가지주의 사항과 함께 지금 권장하는 접근 방식입니다.

• 비교적 최신 브라우저가 필요합니다.
• 파일이 매우 클 것으로 예상되는 경우 아래 작업 중 일부가 다운로드중인 파일 및 / 또는 기타 흥미로운 CPU만큼 큰 시스템 메모리를 사용할 수 있으므로 원래 접근 방식 (iframe 및 쿠키)과 유사한 작업을 수행해야합니다. 부작용.

 

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;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 오리지널 jQuery / iframe / 쿠키 기반 접근 방식

Bluish 는 이것에 대해 완전히 옳습니다. JavaScript는 보안 문제로 인해 파일을 사용자 컴퓨터에 직접 저장할 수 없기 때문에 Ajax를 통해 할 수 없습니다. 불행히도 파일 다운로드에서 주 창의 URL을 가리키면 파일 다운로드가 발생할 때 사용자 경험을 거의 제어 할 수 없습니다.

더 나은 사용자 경험을 제공하기 위해 OnSuccess 및 OnFailure 콜백으로 완료된 파일 다운로드와 함께 "Ajax 유사"경험을 허용하는 jQuery 파일 다운로드 를 만들었습니다. 플러그인이 해결하는 일반적인 문제와이를 사용하는 몇 가지 방법 및 작동중인 jQuery 파일 다운로드 데모 에 대한 내 블로그 게시물 을 살펴보십시오. 여기에 소스가 있습니다

다음은 프라 미스 와 함께 플러그인 소스를 사용하는 간단한 사용 사례 데모입니다. 데모 페이지 에는 다른 많은 '더 나은 UX'예제도 포함되어 있습니다.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

지원해야하는 브라우저에 따라 https://github.com/eligrey/FileSaver.js/ 를 사용할 수 있습니다. 이는 IFRAME 메서드 jQuery File Download가 사용하는 것보다 더 명시적인 제어를 허용합니다.

출처 : https://stackoverflow.com/questions/4545311/download-a-file-by-jquery-ajax