jQuery Ajax请求内容的下载为空 [英] Download of jQuery Ajax request contents is empty

问题描述

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

I have a PHP file that returns output in PDF - Works fine if I access the file directly.

我想通过AJAX检索PDF文件.

I'd like to retrieve the PDF file through AJAX.

在本机Javascript中，它工作正常:

In native Javascript, it works fine:

  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中使用，但我尚未在其他浏览器/其他平台上对其进行过测试)

But I guess I'd use jQuery to ensure cross browser compatibility (although the snippet above works in Edge, Chrome and Firefox on pc, I haven't tested it in other browsers/on other platforms)

所以我试图重写该函数:

So I tried to rewrite the function:

  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文件为空.

The jQuery equivalent allows me to download a PDF file but … the PDF file is empty.

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

So I guess I am doing something wrong, probably in the DATA to BLOB conversion. But what? I hope somebody can see what I am doing wrong.

我一直在StackOverflow上使用年龄，阅读了很多建议-但没有找到任何答案.我简直看不见树木茂盛的森林.

I've been using ages on StackOverflow, read many suggestions - but didn't find any answer. I simply can't see the forest for the trees.

推荐答案

可能加倍！

这是我在使用jquery ajax下载pdf文件的Hisham的帮助下找到的解决方案. /a>:

This is the solution I found thanks to Hisham at Download pdf file using jquery ajax:

首先，添加以下可用于JQuery缺少的XHR V2功能的插件: https://github.com/acigna/jquery-ajax-native

First, add the following plugin that can be used to the XHR V2 capabilities missing in JQuery: https://github.com/acigna/jquery-ajax-native

然后:

   url='./api/pdftest.php?wpid='+wpid;
   $.ajax(
    {
     dataType: 'native',
     url: url,
     xhrFields:
      {
       responseType: 'blob'
      },
     success: function(blob)
      {
       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));
      }
    });

这似乎有效. 注意:window.open()用于在Firefox中进行下载，link.click()方法适用于Edge，Chrome和Opera

This seems to be working. Note: the window.open() is to make download possible in Firefox, the link.click() method Works in Edge, Chrome and Opera

感谢miken32指向正确的方向.

Thanks to miken32 for pointing into the right direction.

这篇关于jQuery Ajax请求内容的下载为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！