从AJAX下载PDF文件后成功回调

PDF File download from AJAX Post success callback

本文关键字：成功 回调 文件 PDF AJAX 下载      更新时间：2023-09-26

当我试图链接到一个数据生成的文件时，我已经设置为PDF文档呈现，这可以在一个新窗口中打开PDF文档，但仅适用于小数据集:

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

我需要它为这样的东西工作，所以我可以使我的PDF与更大的数据集兼容。我尝试在ajax请求的数据部分传递参数，但它不适用于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返回的结果是纯文本，并且可能导致下载二进制作为文本而不是作为arrayBuffer或blob的"超出范围"。jQuery不支持responseType在任何方式(我知道)

所以你需要依靠xhr或fetch来获取它作为一个blob来获得正确的内容。否则你会得到损坏的数据

下面是一个使用新的获取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))

但是，如果您使用xhr + responseType = blob，则有更广泛的支持

你能做的最好的事情就是发送内容处理头并制作附件-但是你不能使用ajax…需要提交表单(可能来自iframe)

使用$。ajax和filesave

我认为xhrFields应该是你寻找的答案…

$.ajax({
    type: "POST",
    url: "your-url/to/pdf/response",
    data: params,
    xhrFields: {
        responseType: 'blob'  // without this, you will get blank pdf!
    },
}).done( function(res) {
    blob = new Blob([res], { type: 'application/pdf' })
    saveAs(blob, "response.pdf")
}).fail( function() {
    alert("Error! Please try again later...");
});

这是不使用savea函数的正确答案:

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();
};

最终解决了我的问题。谢谢你，Endless.

相关文章：