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");
?>

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

업데이트 2015 년 4 월 27 일

HTML5 장면에 등장하는 것은 다운로드 속성 입니다. Firefox 및 Chrome 에서 지원 되며 곧 IE11에 제공 될 예정입니다. 필요에 따라 window.location다운로드하려는 파일이 사이트와 동일한 출처에있는 한 AJAX 요청 (또는 사용 ) 대신 사용할 수 있습니다.

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

원래 답변

다운로드를 요청하기 위해 물리적으로 파일로 이동해야하므로 AJAX 요청으로 다운로드 프롬프트를 열 수 없습니다. 대신 성공 함수를 사용하여 download.php로 이동할 수 있습니다. 다운로드 프롬프트가 열리지 만 현재 페이지는 변경되지 않습니다.

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

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

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

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

실제로 이것을 위해 아약스가 전혀 필요하지 않습니다. 버튼의 href로 "download.php"를 설정하거나 링크가 아닌 경우 다음을 사용하십시오.

window.location = 'download.php';

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

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.setRequestHeader('my-custom-header', 'custom-value'); // adding some headers (if needed)

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

것이 가능하다. 예를 들어 .csv 파일이 생성 된 직후와 같이 ajax 함수 내에서 다운로드를 시작할 수 있습니다.

연락처 데이터베이스를 .csv 파일로 내보내는 ajax 기능이 있으며 완료 직후 자동으로 .csv 파일 다운로드를 시작합니다. 따라서 responseText를 받고 모든 것이 정상이면 다음과 같이 브라우저를 리디렉션합니다.

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

나는 선호한다 location.assign(url);

완전한 구문 예 :

document.location.assign('https://www.urltodocument.com/document.pdf');

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

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

    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, '');
    }

이 솔루션은 위의 솔루션과 크게 다르지 않지만 저에게는 매우 잘 작동하고 깨끗하다고 ​​생각합니다.

파일 서버 측 (PHP를 사용하는 경우 base64_encode ())을 base64로 인코딩하고 base64로 인코딩 된 데이터를 클라이언트에 보내는 것이 좋습니다.

클라이언트에서 다음을 수행합니다.

 let blob = this.dataURItoBlob(THE_MIME_TYPE + "," + response.file);
 let uri = URL.createObjectURL(blob);
 let link = document.createElement("a");
 link.download = THE_FILE_NAME,
 link.href = uri;
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);

이 코드는 인코딩 된 데이터를 링크에 넣고 링크 클릭을 시뮬레이션 한 다음 제거합니다.

귀하의 요구 사항은 다음에서 다루어집니다. window.location('download.php');
하지만 항상 동일한 파일을 다운로드하는 것이 아니라 다운로드 할 파일을 전달해야한다고 생각합니다. 이것이 요청을 사용하는 이유입니다. 한 가지 옵션은 showfile.php와 같이 간단한 php 파일을 생성하는 것입니다. 같은 요청을

var myfile = filetodownload.txt
var url = "shofile.php?file=" + myfile ;
ajaxRequest.open("GET", url, true);

showfile.php

<?php
$file = $_GET["file"] 
echo $file;

여기서 file은 요청에서 Get 또는 Post를 통해 전달 된 파일 이름이며 함수에서 응답을 간단히 포착합니다.

if(ajaxRequest.readyState == 4){
                        var file = ajaxRequest.responseText;
                        window.location = 'downfile.php?file=' + file;  
                    }
                }

ajax에서 웹 페이지를 다운로드하는 또 다른 솔루션이 있습니다. 하지만 먼저 처리 한 다음 다운로드해야하는 페이지를 언급하고 있습니다.

먼저 결과 다운로드에서 페이지 처리를 분리해야합니다.

1) 페이지 계산은 ajax 호출에서만 수행됩니다.

$ .post ( "CalculusPage.php", {calculusFunction : true, ID : 29, data1 : "a", data2 : "b"},

       기능 (데이터, 상태) 
       {
            if (상태 == "성공") 
            {
                / * 2) 답변에서 이전 계산을 사용하는 페이지가 다운로드됩니다. 예를 들어, 이것은 ajax 호출에서 계산 된 테이블의 결과를 인쇄하는 페이지 일 수 있습니다. * /
                window.location.href = DownloadPage.php + "? ID ="+ 29;
            }               
       }
);

// 예 : CalculusPage.php

    if (! empty ($ _ POST [ "calculusFunction"])) 
    {
        $ ID = $ _POST [ "ID"];

        $ query = "INSERT INTO ExamplePage (data1, data2) VALUES ( '". $ _ POST [ "data1"]. "', '". $ _ POST [ "data2"]. "') WHERE id =". $ ID;
        ...
    }

// 예 : DownloadPage.php

    $ ID = $ _GET [ "ID"];

    $ sede = "선택 * FROM ExamplePage WHERE id =". $ ID;
    ...

    $ filename = "Export_Data.xls";
    header ( "콘텐츠 유형 : application / vnd.ms-excel");
    header ( "Content-Disposition : inline; filename = $ filename");

    ...

이 솔루션이 저와 마찬가지로 많은 사람들에게 유용 할 수 있기를 바랍니다.

보다 현대적인 접근 방식을 찾는 사람들을 위해 fetch API. 다음 예는 스프레드 시트 파일을 다운로드하는 방법을 보여줍니다. 다음 코드로 쉽게 수행 할 수 있습니다.

fetch(url, {
    body: JSON.stringify(data),
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
})
.then(response => response.blob())
.then(response => {
    const blob = new Blob([response], {type: 'application/application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = downloadUrl;
    a.download = "file.xlsx";
    document.body.appendChild(a);
    a.click();
})

저는이 접근 방식이 다른 XMLHttpRequest솔루션 보다 이해하기 훨씬 쉽다고 생각합니다 . 또한 jQuery추가 라이브러리를 추가 할 필요없이 접근 방식 과 유사한 구문을 가지고 있습니다.

물론이 새로운 접근 방식은 IE에서 작동하지 않으므로 개발중인 브라우저를 확인하는 것이 좋습니다. 다음 링크 에서 전체 브라우저 호환성 목록을 찾을 수 있습니다 .

중요 :이 예에서는 주어진 .NET에서 수신하는 서버에 JSON 요청을 보냅니다 url. 이것은 url설정되어야합니다. 제 예에서는이 부분을 알고 있다고 가정합니다. 또한 요청이 작동하는 데 필요한 헤더를 고려하십시오. JSON을 전송하고 있으므로 Content-Type헤더 를 추가 하고로 설정 application/json; charset=utf-8하여 서버가 수신 할 요청 유형을 알려야합니다 .

@Joao Marcos 솔루션이 나를 위해 작동하지만 코드가 어떻게 보이는지 아래에서 IE에서 작동하도록 코드를 수정해야했습니다.

       downloadFile(url,filename) {
        var that = this;
        const extension =  url.split('/').pop().split('?')[0].split('.').pop();

        var req = new XMLHttpRequest();
        req.open("GET", url, true);
        req.responseType = "blob";
        req.onload = function (event) {
            const fileName = `${filename}.${extension}`;
            const blob = req.response;

            if (window.navigator.msSaveBlob) { // IE
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            } 
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);                
            link.download = fileName;
            link.click();
            URL.revokeObjectURL(link.href);

        };

        req.send();
    },