PDF AJAX 게시 성공 콜백

Question

PDF 문서로 렌더링되도록 설정된 데이터 생성 파일에 연결하려고하면이 작업을 통해 새 창에서 PDF 문서가 열립니다 작은 데이터 세트의 :

window.open(myUrl + params, "_blank", "menubar=no,status=no"); 

나는 내가 큰 데이터 세트를 내 PDF 호환 할 수있는이 같은 뭔가를 작동하도록해야합니다. 나는 아약스 요청의 데이터 섹션에서 매개 변수를 전달하려고했지만 PDF 문서에만 작동하지 않습니다. Word 및 Excel 문서에서 작동합니다. PDF와 같은 것을 시도 할 때, 깨진 PDF 객체로 다운로드를 반환합니다.

$.ajax({ 
    type:"POST", 
    async:true, 
    url: myUrl, 
    data: params, 
    success: function(result,status,jqhxr) {     
     var blob=new Blob([result]); 
     var link=document.createElement('a'); 
     link.setAttribute('target','_blank'); 
     link.href=window.URL.createObjectURL(blob); 
     link.download="PreviewProposalAsPdf.pdf"; 
     link.click();      
    } 
}); 

PDF를 올바르게 렌더링하려면 어떻게해야합니까? 이상적으로는 새 창에서 직접 PDF 페이지로 이동하고 싶지만 클릭 가능한 파일 다운로드를 처리합니다. 가능한 경우 전체 솔루션을 직접 게시하십시오. 나는 이것에 많은 시간을 보냈고 나의 시간은 이제 부족하다.

다른 질문에 대한 해결책을 찾았지만 해결 된 해결책은 없었습니다. 어떤 경우에는 내가 이미 시도하고있는 것이 솔루션으로 게시되었습니다. 도와주세요.

감사

Answer 1

당신이 jQuery를 아약스를 사용 돌아갈 결과는 일반 텍스트와 텍스트로 바이너리가 아닌 arrayBuffer 또는 BLOB으로 다운로드하는 "범위를 벗어"으로 이어질 수 있습니다. jQuery는 어떤 식 으로든 응답 유형을 지원하지 않습니다. (알고있는 것)

그래서 xhr에 의존하거나 컨텐츠를 올바르게 가져 오려면 blob로 가져와야합니다. 그렇지 않으면 당신은 당신이 XHR + responseType = 방울

를 사용하는 경우 더 넓은 지원이 더있다, 손상된 데이터

다음

새로운 fetch API와 FileSaver

function saveAs(blob, filename){ 
    if(navigator.msSaveOrOpenBlob) 
     return navigator.msSaveOrOpenBlob(blob, filename) 

    var link = document.createElement('a') 
    link.href = window.URL.createObjectURL(blob) 
    link.download = filename 
    link.click() 
} 

fetch(myUrl, { 
    method: 'post', 
    body: JSON.stringify(params) 
    headers: { 
     'Content-Type': 'application/json;charset=UTF-8' 
    } 
}) 
.then(res => res.blob()) 
.then(blob => saveAs(blob, 'PreviewProposalAsPdf.pdf')) 


// EXAMPLE USING XHR 
var req = new XMLHttpRequest 
req.open('GET', myUrl, true) 
req.responseType = 'blob' 
req.onload = function() { 
    saveAs(res.response, 'Dossier_' + new Date() + '.pdf') 
} 
req.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); 
req.send(JSON.stringify(params)) 

그러나 OFC를 사용하는 예입니다을 얻을 것이다 당신이 할 수있는 최선의 일은 단지 내용 처리 헤더를 보내고 첨부 파일을 만드는 것입니다.하지만 아약스를 사용할 수는 없습니다 ... 양식을 제출해야합니다 (iframe에서 가능)

Answer 2

이것은 정답입니다. SaveAs 함수 사용 :

var req = new XMLHttpRequest(); 
req.open("POST", myUrl, true); 

req.responseType = "blob"; 

req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
req.send(data); 

req.onreadystatechange = function() {//Call a function when the state changes. 
    if(req.readyState == 4 && req.status == 200) { 
     console.log(req.responseText); 
    } 
} 

req.onload = function (event) { 
    var blob = req.response; 
    console.log(blob.size); 
    var link=document.createElement('a'); 
    link.href=window.URL.createObjectURL(blob); 
    link.download="Dossier_" + new Date() + ".pdf"; 
    link.click(); 
}; 

궁극적으로 내 문제를 해결했습니다. 고맙습니다, 끝이 없네요.