javascript - 从 AJAX 下载 PDF 文件成功回调

Question

当我尝试链接到已设置为呈现为 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 页面，但我会选择可点击的文件下载。如果可能的话，请直接发布完整的解决方案。我在这上面花了很多时间，但现在时间已经不多了。

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

谢谢

Answer 1

使用 jQuery ajax 返回的结果是纯文本，并且可能导致将二进制文件下载为文本而不是 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 = blob，会有更广泛的支持

你能做的最好的事情就是发送 content-disposition header 并制作附件 - 但这样你就不能使用 ajax...需要提交表单(可能来自 iframe)