복붙노트

[JQUERY] jQuery.Ajax하여 파일을 다운로드

JQUERY

jQuery.Ajax하여 파일을 다운로드

해결법

  1. 1.2019 최신 브라우저 업데이트

    2019 최신 브라우저 업데이트

    이것은 내가 지금 몇 가지주의로 추천하려는 접근 방법이다 :

    가져 오기 ( 'https://jsonplaceholder.typicode.com/todos/1') 그 때는 (RESP => resp.blob ()) 그 때는 BLOB (=> { CONST URL = window.URL.createObjectURL (BLOB); CONST A = document.createElement ( "A"); a.style.display = '없음'; a.href = URL; // 파일 이름 당신이 원하는 a.download = 'TODO-1.json'; document.body.appendChild (a); a.click (); window.URL.revokeObjectURL (URL); 경고 ( '파일이 다운로드했다!'); // 또는 당신은 더 나은 UX와 뭔가를 알고 ... }) ( '오!'(() => 경고)) .catch;

    2012 원본 jQuery를 / iframe이 / 쿠키 기반의 접근 방식

    푸른 색은 Ajax를 통해 때문에 자바 스크립트 수 없습니다 직접 사용자의 컴퓨터에 파일을 저장 (보안 문제 만점)을 할 수 없어, 바로 이것에 대해 완전히이다. 불행하게도 당신은 파일 다운로드가 발생했을 때 사용자 경험이 무엇인지를 통해 작은 제어 할 수 있습니다 파일 다운로드 수단에서 메인 윈도우의 URL을 가리키는.

    나는 더 나은 사용자 경험을 제공 할 onsuccess는와 OnFailure 콜백와 전체 파일 다운로드 경험 "와 같은 아약스"는 허용 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 파일 다운로드 사용보다 더 명시 적으로 제어 할 수있는를 사용할 수 있습니다 지원해야합니다.

  2. 2.나는 그것을 게시합니다, 그래서 아무도 ... 페카의 솔루션 @이를 기록했다. 그것은 다른 사람을 도울 수 있습니다.

    나는 그것을 게시합니다, 그래서 아무도 ... 페카의 솔루션 @이를 기록했다. 그것은 다른 사람을 도울 수 있습니다.

    당신은 Ajax를 통해이 작업을 수행 할 필요가 없습니다. 그냥 사용

    window.location="download.action?para1=value1...."

  3. 3.당신은 HTML5 때와 수

    당신은 HTML5 때와 수

    NB : 당신은 JSON이 바이너리 데이터를 인코딩 할 수 없기 때문에 파일 데이터는 base64로 인코딩되어야합니다 반환

    내 AJAX 응답에서 나는 데이터 구조를 가지고 그 다음과 같다 :

    {
    result: 'OK',
    download: {
        mimetype: string(mimetype in the form 'major/minor'),
        filename: string(the name of the file to download),
        data: base64(the binary data as base64 to download)
    }
}

    내가 AJAX를 통해 파일을 저장하려면 다음을 수행 할 수 있음을 의미

    var a = document.createElement('a');
if (window.URL && window.Blob && ('download' in a) && window.atob) {
    // Do it the HTML5 compliant way
    var blob = base64ToBlob(result.download.data, result.download.mimetype);
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = result.download.filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

    함수 base64ToBlob 여기에서 찍은이 기능을 준수하여 사용해야합니다

    function base64ToBlob(base64, mimetype, slicesize) {
    if (!window.atob || !window.Uint8Array) {
        // The current browser doesn't have the atob function. Cannot continue
        return null;
    }
    mimetype = mimetype || '';
    slicesize = slicesize || 512;
    var bytechars = atob(base64);
    var bytearrays = [];
    for (var offset = 0; offset < bytechars.length; offset += slicesize) {
        var slice = bytechars.slice(offset, offset + slicesize);
        var bytenums = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            bytenums[i] = slice.charCodeAt(i);
        }
        var bytearray = new Uint8Array(bytenums);
        bytearrays[bytearrays.length] = bytearray;
    }
    return new Blob(bytearrays, {type: mimetype});
};

    서버가 저장 될 덤핑 FILEDATA 인 경우에 좋다. 그러나, 나는 꽤 하나는 HTML4 대체를 구현하는 것이 방법 일 적이 없다

  4. 4.브라우저 다운로드에게 파일을 만들 수있는 간단한 방법은 그런 요청을하는 것입니다 :

    브라우저 다운로드에게 파일을 만들 수있는 간단한 방법은 그런 요청을하는 것입니다 :

     function downloadFile(urlToSend) {
     var req = new XMLHttpRequest();
     req.open("GET", urlToSend, true);
     req.responseType = "blob";
     req.onload = function (event) {
         var blob = req.response;
         var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
         var link=document.createElement('a');
         link.href=window.URL.createObjectURL(blob);
         link.download=fileName;
         link.click();
     };

     req.send();
 }

    이 브라우저 다운로드가 나타납니다.

  5. 5.1. 프레임 워크 불가지론 : 서블릿은 첨부 파일을 다운로드

    1. 프레임 워크 불가지론 : 서블릿은 첨부 파일을 다운로드

    <!-- with JS -->
<a href="javascript:window.location='downloadServlet?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadServlet?param1=value1" >download</a>

    2. Struts2 프레임 워크 : 액션은 첨부 파일을 다운로드

    <!-- with JS -->
<a href="javascript:window.location='downloadAction.action?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadAction.action?param1=value1" >download</a>

    <: 홈페이지의> 태그로 생성 된 URL에 OGNL을 가리키는 태그 : 그것은 를 사용하는 것이 좋을 것이다 :

    <!-- without JS, with Struts tags: THE RIGHT WAY -->    
<s:url action="downloadAction.action" var="url">
    <s:param name="param1">value1</s:param>
</s:ulr>
<s:a href="%{url}" >download</s:a>

    위의 경우에, 당신은 파일 필요 (첨부 파일)을 다운로드하고 브라우저 (인라인)에 의해 열리지 할 것을 지정하여 응답 내용 - 처리 헤더를 작성해야합니다. 당신은 너무 컨텐츠 유형을 지정해야합니다, 당신은 (도움말을 실제 진행 막대 그리기 브라우저를) 파일 이름과 길이를 추가 할 수 있습니다.

    예를 들어, 우편 번호를 다운로드 할 때 :

    response.setContentType("application/zip");
response.addHeader("Content-Disposition", 
                   "attachment; filename=\"name of my file.zip\"");
response.setHeader("Content-Length", myFile.length()); // or myByte[].length...

    Struts2로 (당신은 예를 들어, 서블릿, 직접 스트리밍에 대한 해킹과 액션을 사용하지 않는 경우), 당신은 응답에 직접 쓰기 아무것도 필요하지 않습니다; 간단하게 작동합니다 스트림 결과 유형을 사용하고 struts.xml에서 그것을 구성 : 예를

    <result name="success" type="stream">
   <param name="contentType">application/zip</param>
   <param name="contentDisposition">attachment;filename="${fileName}"</param>
   <param name="contentLength">${fileLength}</param>
</result>

    3. 프레임 워크 불가지론 (/ Struts2 프레임 워크) : 브라우저 내부 서블릿 (/ 액션) 파일을 여는

    대신 그것을 다운로드하는 브라우저 내부의 파일을 열려면, 내용 - 처리 인라인으로 설정해야하지만 대상은 현재 창 위치가 될 수 없습니다; 당신이 자바 스크립트에 의해 생성 된 새 창을 대상으로해야