Jquery로 httpServlet에서 파일을 다운로드하는 방법은 무엇입니까?

Question

내 응용 프로그램에서 클라이언트 측에 json 객체가 만들어집니다. 이 객체는 POST 데이터를 기반으로 pdf 파일을 만드는 HttpServlet에 게시됩니다.

파일이 사용자에게 다시 전송됩니다. succes 함수가 호출되고 스트림 데이터가 기록됩니다. 그러나 그 파일이 다운로드되기를 원합니다.

어떻게해야합니까?

내 클라이언트 측 코드 :

$(document).ready(function() { 
// when the print button is clicked 
$('#exportButton').click(function() { 

    var tableIdx = performanceDetailTableController.getTableIdx(); 

    var allData = { 
     "shipTable1":{ 
      "rows":[ 
       { "latitude":"12323","longitude":"213213"}, 
       { "latitude":"213213","longitude":"543543"} 
      ]}, 
     "shipTable2":{ 
      "rows":[ 
       { "latitude":"12323", "longitude":"213213"}, 
       { "latitude":"213213","longitude":"543543"} 
      ]} 
     } 

    var postData = JSON.stringify(allData); 

    $.ajax({ 
     type : "POST", 
     url : 'pdfServlet', 
     contentType: "application/json; charset=utf-8", 
     data : postData, 
        async : false, 
     success : function(data) { 
      alert("got some data"); 
      console.log(data); 
     }, 
    }); 
}); 

});

그리고 파일 생성 서블릿 : 포인터

에 대한 *

가 http://www.particletree.com/notebook/ajax-file-download-or-not/ 참조 :

%PDF-1.4 
% 
4 0 obj 
<< 
/Producer (Apache FOP Version SVN branches/fop-0_95) 
/CreationDate (D:20130725162007+02'00') 
>> 
endobj 
5 0 obj 
<< 
    /N 3 
    /Length 11 0 R 
    /Filter /FlateDecode 
>> 
stream 
xwTSϽ7PhRHH.*1 J 

* MY 해결책 :

@Override 
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { 

    // get the json content 
    StringBuffer jsonContent = getPostedContent(request); 

    log.info(jsonContent.toString()); 

    // convert json to pojo's 
    Tables tables = getTablesFromString(jsonContent); 

    // create a xml stream 
    ByteArrayOutputStream xml = new XmlConverter().getXMLSource(tables); 

    // put the xml on the request 
    request = setXmlOnRequest(request, xml); 

    // create pdf data of the pdf-able xml content 
    ByteArrayOutputStream pdf = new PdfHandler().createPdfDataStream(request); 

    // response = createResponseheaders(response, request); 
    response.setContentType("application/pdf"); 
    response.setContentLength(pdf.size()); 
    response.setHeader("Content-disposition", "attachment; filename=test.pdf"); 
    response.setCharacterEncoding("utf-8"); 
    response.getOutputStream().write(pdf.toByteArray()); 

    //close the streams 
    pdf.close(); 
    response.getOutputStream().close(); 
} 

로그의 OUPUT을

하나의 양식을 만들었습니다. 숨겨진 필드 : 내가 내 JQuery와 데이터 후 컨트롤러를 변경보다

 <button id="exportButton">export</button> 
    <form id="exportForm" method="post" action="pdfServlet"> 
     <input type="hidden" value="empty" id="pdf_data" name="pdf_data" /> 
    </form> 

: 내가 내보내기 버튼을 클릭하면 이제

$('#exportButton').click(function() { 

    var tableIdx = performanceDetailTableController.getTableIdx(); 

     var allData = { 
     "shipTable1":{ 
      "rows":[ 
       { "latitude":"12323","longitude":"213213"}, 
       { "latitude":"213213","longitude":"543543"} 
      ]}, 
     "shipTable2":{ 
      "rows":[ 
       { "latitude":"12323", "longitude":"213213"}, 
       { "latitude":"213213","longitude":"543543"} 
      ]} 
     } 



    var postData = JSON.stringify(allData); 

    // put the data on the hidden form field in the export form 
    $('#pdf_data').val(postData); 

    // and submit the form 
    $('#exportForm').submit(); 

}); 

양식의 숨겨진 필드는 게시 할 데이터와 데이터를 가져옵니다 인코딩 된 형태로 게시됩니다.

이렇게하면 서블릿이 요청을 처리 할 수 ​​있고 파일이 클라이언트로 다운로드됩니다.

Answer 1

아약스로 파일을 다운로드 할 수 없습니다. JavaScript는 확실한 보안상의 이유 때문에 Save As 대화 상자를 트리거하여 임의로 검색/생성 된 컨텐트를 JavaScript 컨텍스트에서 트리거 할 수있는 기능이 없습니다. 가능한 경우 월드 와이드 웹은 매우 다르게 보였을 것입니다.

JS/jQuery를 사용하고 싶다면 대신에 synchronus GET 요청을 보내야합니다. window.location (doPost() ~ doGet())의 이름으로 바꾸면됩니다.

window.location = 'pdfServlet?param1=value1&param2=value2'; 

또는 그냥 불필요한 JS/jQuery를 모두 버리고 단지 <input type="submit">와 일반 HTML <form action="pdfServlet" method="post">를 사용합니다. 추가 보너스는 JS가 비활성화 된 브라우저에서 작동한다는 것입니다.

아약스를 독점하려는 유일한 이유는 실제로 페이지가 새로 고쳐지지 않도록하기위한 순진한 시도 인 경우 응답에 Content-Disposition: attachment 헤더가있는 경우 실제로 발생하지 않는다고 말할 수 있습니다. 그 부분은 이미 안전합니다.