PDF AJAXからのファイルダウンロード成功のコールバック

Question

私がPDF文書としてレンダリングするように設定したデータ生成ファイルにリンクしようとすると、これは新しいウィンドウでPDF文書を開くためにのみ機能します小さなデータセットの場合：

このようにするには、大きなデータセットと互換性のあるPDFを作成する必要があります。私はajaxリクエストのデータセクションでparamsを渡そうとしましたが、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ページに移動したいと思いますが、クリック可能なファイルのダウンロードが完了します。可能であれば、完全なソリューションを直接投稿してください。私はこれに多くの時間を費やして、私の時間は現在不足しています。

私は他の質問で解決策を探しましたが、解決策のどれも働かなかった。場合によっては、私がすでに試みていることが解決策として掲示されました。助けてください。あなたが戻ってjQueryのAJAXを使用してから取得

おかげ

Answer 1

結果はプレーンテキストで、テキストとしてではなくarrayBufferまたはBLOBなどのバイナリをダウンロードするための「範囲外」につながることができます。 jQueryは（私が知っている）どんな方法でもresponseTypeをサポートしていません

したがって、コンテンツを正しく取得するには、xhrまたはfetchを使用してblobとして取得する必要があります。そうしないと、破損したデータに

ここ

を取得する新しい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を使用する例であるあなたはXHR + responseTypeを使用する場合は、より広いサポートはあり=ブロブ

あなたが行うことができる最もよいことはちょうど内容 - 処分のヘッダーを送信し、添付ファイルを作成することです - しかし、あなたはajaxを使用することはできません...フォームを提出する必要があります（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(); 
}; 

最終的に私の問題を解決しました。ありがとう、エンドレス。