ajax 요청을 사용하여 파일 다운로드

ajax 요청을 사용하여 파일 다운로드

버튼을 클릭 할 때 "아약스 다운로드 요청"을 보내려고 했으므로 다음과 같이 시도했습니다.

자바 스크립트 :

var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();

download.php :

<?
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename= file.txt");
header("Content-Transfer-Encoding: binary");    
readfile("file.txt");
?>

예상대로 작동하지 않습니다. 어떻게해야합니까? 미리 감사드립니다.

해결법

1. ==============================

   1.2015 년 4 월 27 일 업데이트

   2015 년 4 월 27 일 업데이트

   HTML5 장면을보고 오면 다운로드 속성이됩니다. Firefox 및 Chrome에서 지원되며 곧 IE11에 제공됩니다. 필요에 따라 다운로드하려는 파일이 사이트와 동일한 위치에있는 한 AJAX 요청 대신 window.location을 사용할 수 있습니다.

   다운로드가 지원되는지 테스트하기 위해 일부 JavaScript를 사용하고 그렇지 않은 경우 window.location을 호출하도록 전환하여 AJAX 요청 / window.location을 대체로 만들 수 있습니다.

   원문 답변

   다운로드하라는 메시지가 나타나면 파일로 이동해야하기 때문에 AJAX 요청에서 다운로드 프롬프트를 열 수 없습니다. 대신 성공 함수를 사용하여 download.php로 이동할 수 있습니다. 그러면 다운로드 프롬프트가 열리지 만 현재 페이지는 변경되지 않습니다.

   $.ajax({
       url: 'download.php',
       type: 'POST',
       success: function() {
           window.location = 'download.php';
       }
   });
   

   이 질문에 대한 답변이지만 window.location을 사용하고 AJAX 요청을 완전히 피하는 것이 좋습니다.

2. ==============================

   2.실제로 아약스가 필요하지 않습니다. 버튼의 href로 "download.php"를 설정 한 경우 또는 링크가 아닌 경우에는 다음을 사용하십시오.

   실제로 아약스가 필요하지 않습니다. 버튼의 href로 "download.php"를 설정 한 경우 또는 링크가 아닌 경우에는 다음을 사용하십시오.

   window.location = 'download.php';
   

   브라우저는 바이너리 다운로드를 인식하고 실제 페이지를로드하지 않고 파일을 다운로드로 제공해야합니다.

3. ==============================

   3.브라우저에서 파일을 다운로드하게하려면 다음과 같이 요청해야합니다.

   브라우저에서 파일을 다운로드하게하려면 다음과 같이 요청해야합니다.

    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();
    }
   

4. ==============================

   4.것이 가능하다. .csv 파일을 만든 직후와 같이 ajax 함수 내에서 다운로드를 시작할 수 있습니다.

   것이 가능하다. .csv 파일을 만든 직후와 같이 ajax 함수 내에서 다운로드를 시작할 수 있습니다.

   연락처 데이터베이스를 .csv 파일로 내보내는 Ajax 함수가 있으며 작업이 끝나면 .csv 파일 다운로드가 자동으로 시작됩니다. 그래서 responseText를 얻고 모든 것이 OK가되면 브라우저를 다음과 같이 리디렉션합니다.

   window.location="download.php?filename=export.csv";
   

   내 download.php 파일은 다음과 같습니다.

   <?php
   
       $file = $_GET['filename'];
   
       header("Cache-Control: public");
       header("Content-Description: File Transfer");
       header("Content-Disposition: attachment; filename=".$file."");
       header("Content-Transfer-Encoding: binary");
       header("Content-Type: binary/octet-stream");
       readfile($file);
   
   ?>
   

   페이지를 새로 고침 할 필요가 없으며 파일이 자동으로 다운로드되기 시작합니다.

   참고 - 다음 브라우저에서 테스트되었습니다.

   Chrome v37.0.2062.120 
   Firefox v32.0.1
   Opera v12.17
   Internet Explorer v11
   

5. ==============================

   5.크로스 브라우저 솔루션, Chrome, Firefox, Edge, IE11에서 테스트되었습니다.

   크로스 브라우저 솔루션, Chrome, Firefox, Edge, IE11에서 테스트되었습니다.

   DOM에서 숨겨진 링크 태그를 추가합니다.

   <a id="target" style="display: none"></a>
   

   그때:

   var req = new XMLHttpRequest();
   req.open("GET", downloadUrl, true);
   req.responseType = "blob";
   
   req.onload = function (event) {
     var blob = req.response;
     var fileName = null;
     var contentType = req.getResponseHeader("content-type");
   
     // IE/EDGE seems not returning some response header
     if (req.getResponseHeader("content-disposition")) {
       var contentDisposition = req.getResponseHeader("content-disposition");
       fileName = contentDisposition.substring(contentDisposition.indexOf("=")+1);
     } else {
       fileName = "unnamed." + contentType.substring(contentType.indexOf("/")+1);
     }
   
     if (window.navigator.msSaveOrOpenBlob) {
       // Internet Explorer
       window.navigator.msSaveOrOpenBlob(new Blob([blob], {type: contentType}), fileName);
     } else {
       var el = document.getElementById("target");
       el.href = window.URL.createObjectURL(blob);
       el.download = fileName;
       el.click();
     }
   };
   req.send();
   

6. ==============================

   6.나는 Location.assign ()을 선호한다.

   나는 Location.assign ()을 선호한다.

   developer.mozilla.org/en-US/docs/Web/API/Location.assign

7. ==============================

   7.헤더에서 파일 이름을 디코딩하는 것은 좀 더 복잡합니다 ...

   헤더에서 파일 이름을 디코딩하는 것은 좀 더 복잡합니다 ...

       var filename = "default.pdf";
       var disposition = req.getResponseHeader('Content-Disposition');
   
       if (disposition && disposition.indexOf('attachment') !== -1) 
       {
          var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
          var matches = filenameRegex.exec(disposition);
   
          if (matches != null && matches[1]) 
              filename = matches[1].replace(/['"]/g, '');
       }
   

from https://stackoverflow.com/questions/20830309/download-file-using-an-ajax-request by cc-by-sa and MIT license