javascript - jQuery Ajax请求内容下载为空

Question

我有一个 PHP 文件，它以 PDF 形式返回输出 - 如果我直接访问该文件，则工作正常。

我想通过 AJAX 检索 PDF 文件。

在原生 Javascript 中，它工作得很好:

  var req = new XMLHttpRequest();
  req.open("POST", "./api/pdftest.php?wpid="+wpid, true);
  req.responseType = "blob";
  req.onreadystatechange = function ()
   {
    if (req.readyState === 4 && req.status === 200)
     {
      var blob=req.response;
      var filename = "test.pdf";
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "test.pdf";
      link.click();
      var file = new File([blob], filename, { type: 'application/force-download' });
      window.open(URL.createObjectURL(file));
     }
   };
  req.send();

但我想我会使用 jQuery 来确保跨浏览器兼容性(虽然上面的代码片段适用于 PC 上的 Edge、Chrome 和 Firefox，但我还没有在其他浏览器/其他平台上测试过它)

所以我尝试重写该函数:

  url='./api/pdftest.php?wpid='+wpid;
  $.ajax(
   {
    url: url,
    method: 'POST',
    responseType: 'blob',
    success: function(data)
     {
      var filename='test.pdf';
      var blob=new Blob([data]);
      var filename = "test.pdf";
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "test.pdf";
      link.click();
      var file = new File([blob], filename, { type: 'application/force-download' });
      window.open(URL.createObjectURL(file));
     }
   });

等效的 jQuery 允许我下载 PDF 文件，但是……PDF 文件是空的。

所以我猜我做错了什么，可能是在 DATA 到 BLOB 的转换中。但什么？我希望有人能看到我做错了什么。

我在 StackOverflow 上使用了很长时间，阅读了很多建议 - 但没有找到任何答案。我根本只见树木不见森林。

Answer 1

查看 jQuery.ajax() 的文档函数中，我们看到没有名为 responseType 的设置，因此您需要使用 xhrFields 直接设置 XHR 对象的属性。而且，由于您只设置 URL 和成功回调，因此我们可以使用较短的 jquery.post()功能。

这样数据就返回了，我们做一个Blob然后是下载它的 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);
    }
});