PDF文件從AJAX發佈郵件成功回調

當我嘗試鏈接到一個數據生成的文件時，我已經將其設置爲PDF文檔，這可以在新窗口中打開PDF文檔，但僅限於對於小數據集：PDF文件從AJAX發佈郵件成功回調

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

我需要它來處理這樣的事情，所以我可以使我的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頁面，但我會解決可點擊的文件下載問題。如果可能，請直接發佈完整的解決方案。我花了很多時間在這個上，現在我的時間不多了。

我在其他問題上尋找解決方案，但沒有任何解決方案奏效。在某些情況下，我已經在嘗試發佈的解決方案。請幫忙。

感謝

來源

2016-09-14 JWeyh

你使用jQuery AJAX取回結果是純文本，並可能導致「超出範圍」下載二進制作爲文本而不是arrayBuffer或斑點。 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 = BLOB

的你可以做的最好的事情只是發送內容處置標題和附件 - 但然後你不能使用ajax ...需要提交表格（可能來自iframe）

來源

2016-09-14 20:04:37 Endless

你沒有發佈params作爲body，你在url中使用它們。看我更新的例子 – Endless

這是正確的答案，沒有我們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(); 
};

最終它解決了我的問題。謝謝你，無盡。

來源

2016-09-15 16:36:01 JWeyh

PDF文件從AJAX發佈郵件成功回調

回答

相關問題