Question

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

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页面，但我会接受可点击的文件下载。如果可能，请直接发布完整的解决方案。我花了很多时间在这上面，现在我的时间不多了。

我在其他问题上寻找解决方案，但没有一个解决方案有效。在某些情况下，我已经尝试过的是作为解决方案发布的。请帮忙。

由于

Answer 1

使用jQuery ajax返回的结果是纯文本，可能导致＆＃34;超出范围＆＃34;用于下载二进制文本而不是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))

但是，如果你使用xhr + responseType = blob

，会有更广泛的支持

你可以做的最好的事情就是发送内容处理标题并制作附件 - 但是你不能使用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();
};

最终它解决了我的问题。谢谢，无尽。

PDF文件下载来自AJAX Post成功回调

2 个答案: