AJAX 요청시 응답으로 csv 파일 다운로드

데이터를 수집하고 csv 파일을 다운로드하는 '/ downloadUserAction'이라는 엔드 포인트가 있습니다. 내가 가지고있는 문제는 클릭 기능의 버튼을 사용하여 끝점을 호출 할 때 파일이 다운로드되지 않지만 브라우저에서 직접 끝점에 액세스 할 때만 다운로드된다는 것입니다.AJAX 요청시 응답으로 csv 파일 다운로드

연구 결과 저는 AJAX를 사용하여 파일을 다운로드 할 수 없다는 결론을 얻었습니다. 내 버튼을 클릭하면 엔드 포인트가 적중하고 파일 내용이 네트워크 탭에 전달되는 것을 볼 수 있기 때문에 의미가 있습니다. 그러나 클라이언트에는 파일이 다운로드되지 않습니다.

이것은 내 페이지에서 데이터 표 버튼 플러그인 기능을 사용하여 자바 스크립트 측에서 내 엔드 포인트를 호출하는 것입니다.

$(document).ready(function() { 
    var table = $("#userActivity").on('init.dt', function() { 
      }).DataTable({ 
       dom: 'Blfrtip', 
       buttons: [ 
          { 
          extend: 'csvHtml5', 
          text: 'NLP Search Download', 
          action: function (e, dt, node, config) { 
           $.ajax({ 
            url : window.location + "/downloadUserAction?draw=3&search%5Bvalue%5D=NLP_SEARCH&order%5B0%5D%5Bcolumn%5D=6&order%5B0%5D%5Bdir%5D=desc"       
           }); 
          } 
          } 
         ],

내 끝점을 호출하여 클라이언트 페이지에서 강제로 다운로드 할 수있는 다른 방법이 있습니까?

side-note : 내 데이터 테이블이 서버 측 처리를 사용하고 있습니다. 그렇지 않으면 datatables CSV 내보내기 버튼을 사용했을 것입니다.

const saveData = (function() { 
    const a = document.createElement("a"); 
    document.body.appendChild(a); 
    a.style = "display: none"; 
    return function (data, fileName) { 
     const blob = new Blob([data], {type: "octet/stream"}), 
      url = window.URL.createObjectURL(blob); 
     a.href = url; 
     a.download = fileName; 
     a.click(); 
     window.URL.revokeObjectURL(url); 
    }; 
}()); 

const data = 'a,b,c\n5,6,7', 
    fileName = "my-csv.csv"; 

saveData(data, fileName);

JSFiddle : 최신 브라우저에서

출처

2017-10-09 Daniel Gebrahanus

, 당신은 download 속성을, (아약스 수신 귀하의 경우) 파일의 내용으로의 Blob을 만들어 그것을 위해 URL을 생성하고 사용하여 다운로드하라는 메시지를 표시 할 수 있습니다

Ajax 끝점 URL에 적절한 헤더가있는 경우 (또는 download 속성을 사용하는만큼 길지 않더라도) Blob 및 Ajax를 무시하고 다운로드 링크가있는 URL을 추가하면됩니다. 속성.

const saveData = (function() { 
    const a = document.createElement("a"); 
    document.body.appendChild(a); 
    a.style = "display: none"; 
    return function (url, fileName) { 
     a.href = url; 
     a.download = fileName; 
     a.click(); 
    }; 
}()); 

const url = 'http://www.sample-videos.com/csv/Sample-Spreadsheet-10-rows.csv', // Replace with your own URL: window.location + "/downloadUserAction?draw=3&search%5Bvalue%5D=NLP_SEARCH&order%5B0%5D%5Bcolumn%5D=6&order%5B0%5D%5Bdir%5D=desc" 
    fileName = "my-csv.csv"; 

saveData(url, fileName);

당신이 버튼 내부의 앵커 태그를 설정 할과의 href 속성을 설정할 수 있습니다 무엇 때문에 브라우저에서 직접 엔드 포인트에 액세스 할 때이 다운로드됩니다 이후

JSFiddle

출처

2017-10-09 03:33:08

, pritesh의 코드 @ 적응 csv로 믿을수을 가리키는 URL에 앵커 태그는 여기에 샘플 예제를 만들었습니다 : 당신이 브라우저에서이 코드를하려고하면, 다음의 onclick 대화 상자가 파일을 저장하기 위해 나타납니다

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    <button> 
     <a href="http://www.sample-videos.com/csv/Sample-Spreadsheet-10-rows.csv">Click me</a> 
    </button> 
</body> 
</html>

귀하의 경우에는 샘플 동영상 URL을 자신의 것으로 대체해야합니다.

에서는 window.location + "/ downloadUserAction? 그릴 = 3 & 검색 % 5Bvalue % 5D = NLP_SEARCH & 순서 % 5B0 % 5D %의 5Bcolumn % 5D = 6 & 순서 % 5B0 % 5D %의 5Bdir %의 5D = DESC "

출처

2017-10-09 03:36:51 pritesh

AJAX 요청시 응답으로 csv 파일 다운로드

답변

관련 문제