Javascript jQuery Ajax请求内容的下载为空

我有一个PHP文件，它以PDF格式返回输出-如果我直接访问该文件，效果很好

我想通过AJAX检索PDF文件

在本机Javascript中，它可以正常工作：

var req=新的XMLHttpRequest； req.openPOST，./api/pdftest.php？wpid=+wpid，true； req.responseType=blob； req.onreadystatechange=函数 { 如果req.readyState==4&&req.status==200 { var blob=请求响应； var filename=test.pdf； var link=document.createElement'a'； link.href=window.URL.createObjectURLblob； link.download=test.pdf； link.click； var file=new file[blob]，filename，{type:'application/force download'}； window.openURL.createObjectURLfile； } };

---

请求发送 查看函数的文档，我们发现没有名为responseType的设置，因此需要使用xhrFields直接设置XHR对象的属性。而且，因为您只设置URL和成功回调，所以我们可以使用更短的函数

因此，返回数据后，我们创建一个链接，然后创建一个URL来下载它。我不在Windows上，所以我无法测试我构建的链接是否能像预期的那样工作，但我想我会用jQuery的方式来完成

var url = './api/pdftest.php?wpid=' + wpid;
$.post({
    url: url,
    xhrFields: {responseType: "blob"},
    success: function(data) {
        // don't set the MIME type to pdf or it will display
        var blob = new Blob([data], {type: "application/octet-stream"});
        // build a blob URL
        var bloburl = window.URL.createObjectURL(blob);
        // trigger download for edge
        var link = $("<a>").attr({href: bloburl, download: "test.pdf"}).click();
        // trigger download for other browsers
        window.open(bloburl);
    }
});

---

查看函数的文档，我们发现没有名为responseType的设置，因此需要使用xhrFields直接设置XHR对象的属性。而且，因为您只设置URL和成功回调，所以我们可以使用更短的函数

因此，返回数据后，我们创建一个链接，然后创建一个URL来下载它。我不在Windows上，所以我无法测试我构建的链接是否能像预期的那样工作，但我想我会用jQuery的方式来完成

var url = './api/pdftest.php?wpid=' + wpid;
$.post({
    url: url,
    xhrFields: {responseType: "blob"},
    success: function(data) {
        // don't set the MIME type to pdf or it will display
        var blob = new Blob([data], {type: "application/octet-stream"});
        // build a blob URL
        var bloburl = window.URL.createObjectURL(blob);
        // trigger download for edge
        var link = $("<a>").attr({href: bloburl, download: "test.pdf"}).click();
        // trigger download for other browsers
        window.open(bloburl);
    }
});

---

由于无法通过jQuery.ajax检索二进制数据，因此本机是唯一的方法，至少目前是这样。以下方法适用于在Windows10上测试过的Edge、Firefox、Chrome和Opera

var req=新的XMLHttpRequest； req.openPOST，./api/pdftest.php？wpid=+wpid，true； req.responseType=blob； req.onreadystatechange=函数 { 如果req.readyState==4&&req.status==200 { var blob=请求响应； var filename=test.pdf； var link=document.createElement'a'； link.setAttributetype，隐藏；//如果需要，将其隐藏 link.href=window.URL.createObjectURLblob； link.download=test.pdf； document.body.appendChildlink； link.click； 链接。删除； var file=new file[blob]，filename，{type:'application/force download'}； //window.openURL.createObjectURLfile； } };

---

请求发送 由于无法通过jQuery.ajax检索二进制数据，因此本机是唯一的方法，至少目前是这样。以下方法适用于在Windows10上测试过的Edge、Firefox、Chrome和Opera

var req=新的XMLHttpRequest； req.openPOST，./api/pdftest.php？wpid=+wpid，true； req.responseType=blob； req.onreadystatechange=函数 { 如果req.readyState==4&&req.status==200 { var blob=请求响应； var filename=test.pdf； var link=document.createElement'a'； link.setAttributetype，隐藏；//如果需要，将其隐藏 link.href=window.URL.createObjectURLblob； link.download=test.pdf； document.body.appendChildlink； link.click； 链接。删除； var file=new file[blob]，filename，{type:'application/force download'}； //window.openURL.createObjectURLfile； } }; 请求发送 可能是双倍

这是我找到的解决方案，多亏了Hisham：

首先，添加以下可用于JQuery中缺少的XHR V2功能的插件：

然后：

url='./api/pdftest.php？wpid='+wpid； $.ajax { 数据类型：“本机”， url:url， xhrFields： { 响应类型：“blob” }, 成功：functionblob { var filename=test.pdf； var link=document.createElement'a'； link.href=window.URL.createObjectURLblob； link.download=test.pdf； link.click； var file=new file[blob]，filename，{type:'application/force download'}； window.openURL.createObjectURLfile； } }; 可能是双倍

这是我找到的解决方案，多亏了Hisham：

首先，添加以下可用于JQuery中缺少的XHR V2功能的插件：

然后：

url='./api/pdftest.php？wpid='+wpid； $.ajax { 数据类型：“本机”， url:url， xhrFields： { 响应类型：“blob” }, 成功：functionblob { var filename=test.pdf； var link=document.createElement'a'； link.href=window.URL.createObjectURLblob； link.download=test.pdf； link.click； var file=new file[blob]，filename，{type:'application/force download'}； window.openURL.createObjectURLfile； }

---

};在Chrome和Firefox中尝试了你的解决方案，这让我可以下载一个PDF，但它仍然是一个空的PDF。在Edge中，它根本不会下载。我之所以创建一个链接并放置一个.click，然后尝试强制下载文件，是因为Firefox不接受click方法，而Edge不接受强制下载方法，至少不是我使用的方法。我尝试了你的live版本。首先，当你和一群编程人员交谈时，说下载的文件是空的意味着非常具体的事情。它的意思是空的，如零字节。您的问题是PDF是一个空白页，这完全取决于服务器的响应。您需要调试服务器在某些情况下返回没有文本的PDF的原因。与web inspector进行简单检查后发现，出于某种原因，您的本机Javascript版本没有发送两个标题：X-request-with:XmlHttpRequest和TE:trailes。否则这两个请求是相同的。正确的，我用了一个错误的术语：PDF是空白的，不是空的。但是：如果我直接访问php文件或使用原生XMLHTTPRequest，则PDF不是空的；它在左上角显示当前时间。PDF/PHP文件不是问题所在。我想你说$.Ajax不支持responseType是对的。不，你的服务器返回了一个空白的PDF；这就是问题所在。在Chrome和Firefox中尝试了您的解决方案，这允许我下载PDF，但它仍然是空的PDF。在Edge中，它根本不会下载。我之所以创建一个链接并放置一个.click，然后尝试强制下载文件，是因为Firefox不接受click方法，而Edge不接受强制下载方法，至少不是我使用的方法。我尝试了你的live版本。首先，当你和一群编程人员交谈时，说下载的文件是空的意味着非常具体的事情。它的意思是空的，如零字节。您的问题是PDF是一个空白页，这完全取决于服务器的响应。您需要调试服务器在某些情况下返回没有文本的PDF的原因。与web inspector进行简单检查后发现，出于某种原因，您的本机Javascript版本没有发送两个标题：X-request-with:XmlHttpRequest和TE:trailes。否则这两个请求是相同的。正确的，我用了一个错误的术语：PDF是空白的，不是空的。但是：如果我直接访问php文件或使用原生XMLHTTPRequest，则PDF不是空的；它在左上角显示当前时间。PDF/PHP文件不是问题所在。我想你说$.Ajax不支持responseType是对的。不，你的服务器返回了一个空白的PDF；这就是问题所在。