我一直在尝试使用blobs的另一种选择。我已经设法让它下载文本文档，我下载了PDF文件(但他们是损坏的)。

使用blob API，你可以做以下事情:

$.post(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

这是IE 10+， Chrome 8+， FF 4+。参见https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

它只能在Chrome、Firefox和Opera中下载文件。它使用锚标记上的下载属性强制浏览器下载它。

制作自己的事件的问题

本文提出的许多解决方案都让JavaScript异步运行，并创建一个link元素，然后调用

const a = documet.createElement("a") 
a.click()

或者创建一个鼠标事件

new MouseEvent({/* ...some config */})

这看起来很好，对吧?这有什么错呢?

什么是事件源?

事件源在整个计算领域有很多含义，比如基于云架构的发布订阅系统，或者浏览器api EventSource。在浏览器的上下文中 所有事件都有一个源，该源有一个隐藏属性，说明是谁发起了这个事件(用户或站点)。

了解了这一点，我们就可以开始理解为什么两次点击事件不能被同等对待

user click*          new MouseEvent()
-----------            -----------
| Event 1 |            | Event 2 |
-----------            -----------
     |                      |     
     |----------------------|
                 |
                 |
      ----------------------
      | Permissions Policy |    Available in chrome allows the server to control
      ----------------------    what features are going to be used by the JS
                 |
                 |
   ----------------------------
   | Browser Fraud Protection | The Browser REALLY doesnt like being told to pretend
   ---------------------------- to be a user. If you will remember back to the early
                 |              2000s when one click spun off 2000 pop ups. Well here
                 |              is where popups are blocked, fraudulent ad clicks are
                \ /             thrown out, and most importantly for our case stops 
                 v              fishy downloads
      JavaScript Event Fires

所以我不能下载一个帖子，这是愚蠢的

不，你当然可以。您只需要给用户一个创建事件的机会。这里有一些模式，您可以使用它们来创建明显且常规的用户流，并且不会被标记为欺诈。(使用JSX抱歉，不抱歉)

表单可以使用post操作导航到url。

const example = () => (
  <form
   method="POST"
   action="/super-api/stuff"
   onSubmit={(e) => {/* mutably change e form data but don't e.preventDetfault() */}}
  >
    {/* relevant input fields of your download */}
  </form>
)

如果你的下载是不可配置的，你可能想要考虑将下载预加载到respb . Blob()或new Blob(resp)，这会告诉浏览器这是一个文件，我们不会对它做任何字符串操作。与其他答案一样，你可以使用window.URL.createObjectURL，这里没有提到的是

createObjectURL可以在javascript源代码中产生内存泄漏

如果你不想让c++恶霸来取笑你，你必须释放这个内存。但我只是个爱好，喜欢收垃圾的人。不用担心，这很简单，如果你在大多数框架中工作(对我来说)，你只需要在你的组件和你的权利上注册某种清理效果。

const preload = () => {
  const [payload, setPayload] = useState("")
  
  useEffect(() => {
    fetch("/super-api/stuff")
      .then((f) => f.blob())
      .then(window.URL.createObjectURL)
      .then(setPayload)

    return () => window.URL.revokeObjectURL(payload)
  }, [])


  return (<a href={payload} download disabled={payload === ""}>Download Me</a>)
}

这个问题被问到已经有一段时间了，但我也有同样的挑战，想要分享我的解决方案。它使用了其他答案中的元素，但我无法找到它的全部。它不使用表单或iframe，但它需要post/get请求对。它不是在请求之间保存文件，而是保存post数据。这似乎既简单又有效。

客户端

var apples = new Array(); 
// construct data - replace with your own
$.ajax({
   type: "POST",
   url: '/Home/Download',
   data: JSON.stringify(apples),
   contentType: "application/json",
   dataType: "text",

   success: function (data) {
      var url = '/Home/Download?id=' + data;
      window.location = url;
   });
});

服务器

[HttpPost]
// called first
public ActionResult Download(Apple[] apples)
{
   string json = new JavaScriptSerializer().Serialize(apples);
   string id = Guid.NewGuid().ToString();
   string path = Server.MapPath(string.Format("~/temp/{0}.json", id));
   System.IO.File.WriteAllText(path, json);

   return Content(id);
}

// called next
public ActionResult Download(string id)
{
   string path = Server.MapPath(string.Format("~/temp/{0}.json", id));
   string json = System.IO.File.ReadAllText(path);
   System.IO.File.Delete(path);
   Apple[] apples = new JavaScriptSerializer().Deserialize<Apple[]>(json);

   // work with apples to build your file in memory
   byte[] file = createPdf(apples); 

   Response.AddHeader("Content-Disposition", "attachment; filename=juicy.pdf");
   return File(file, "application/pdf");
}

I know this kind of old, but I think I have come up with a more elegant solution. I had the exact same problem. The issue I was having with the solutions suggested were that they all required the file being saved on the server, but I did not want to save the files on the server, because it introduced other problems (security: the file could then be accessed by non-authenticated users, cleanup: how and when do you get rid of the files). And like you, my data was complex, nested JSON objects that would be hard to put into a form.

What I did was create two server functions. The first validated the data. If there was an error, it would be returned. If it was not an error, I returned all of the parameters serialized/encoded as a base64 string. Then, on the client, I have a form that has only one hidden input and posts to a second server function. I set the hidden input to the base64 string and submit the format. The second server function decodes/deserializes the parameters and generates the file. The form could submit to a new window or an iframe on the page and the file will open up.

这涉及到更多的工作，可能还有更多的处理，但总的来说，使用这个解决方案我感觉好多了。

代码是c# /MVC

    public JsonResult Validate(int reportId, string format, ReportParamModel[] parameters)
    {
        // TODO: do validation

        if (valid)
        {
            GenerateParams generateParams = new GenerateParams(reportId, format, parameters);

            string data = new EntityBase64Converter<GenerateParams>().ToBase64(generateParams);

            return Json(new { State = "Success", Data = data });
        }

        return Json(new { State = "Error", Data = "Error message" });
    }

    public ActionResult Generate(string data)
    {
        GenerateParams generateParams = new EntityBase64Converter<GenerateParams>().ToEntity(data);

        // TODO: Generate file

        return File(bytes, mimeType);
    }

在客户端

    function generate(reportId, format, parameters)
    {
        var data = {
            reportId: reportId,
            format: format,
            params: params
        };

        $.ajax(
        {
            url: "/Validate",
            type: 'POST',
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: generateComplete
        });
    }

    function generateComplete(result)
    {
        if (result.State == "Success")
        {
            // this could/should already be set in the HTML
            formGenerate.action = "/Generate";
            formGenerate.target = iframeFile;

            hidData = result.Data;
            formGenerate.submit();
        }
        else
            // TODO: display error messages
    }

使用HTML5，你可以创建一个锚点并点击它。不需要将它作为子文件添加到文档中。

const a = document.createElement('a');
a.download = '';
a.href = urlForPdfFile;
a.click();

全部完成。

如果你想要下载一个特殊的名字，只需要在download属性中传递它:

const a = document.createElement('a');
a.download = 'my-special-name.pdf';
a.href = urlForPdfFile;
a.click();

我认为最好的方法是结合使用。您的第二种方法似乎是一个优雅的解决方案，其中涉及到浏览器。

这取决于调用的方式。(无论是浏览器还是web服务调用)您可以使用两者的组合，将URL发送到浏览器并将原始数据发送到任何其他web服务客户端。