2019 现代浏览器更新

这是我现在推荐的方法，但有一些注意事项：

• 需要一个相对现代的浏览器
• 如果预计文件非常大，您可能应该执行类似于原始方法（iframe 和 cookie）的操作，因为以下某些操作可能消耗的系统内存至少与正在下载的文件和/或其他有趣的 CPU 一样大副作用。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 原始的基于 jQuery/iframe/Cookie 的方法

Bluish在这方面完全正确，您不能通过 Ajax 做到这一点，因为 JavaScript 无法将文件直接保存到用户的计算机（出于安全考虑）。不幸的是，将主窗口的URL指向您的文件下载意味着您​​几乎无法控制文件下载时的用户体验。

我创建了jQuery File Download，它允许通过 OnSuccess 和 OnFailure 回调完成文件下载的“类似 Ajax”的体验，以提供更好的用户体验。看看我的博客文章，了解插件解决的常见问题和使用它的一些方法，以及jQuery 文件下载的演示。这是来源

这是一个使用带有 promise的插件源的简单用例演示。该演示页包含了许多其他“更好的UX”的例子也是如此。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

根据您需要支持的浏览器，您可以使用https://github.com/eligrey/FileSaver.js/，它允许比 jQuery File Download 使用的 IFRAME 方法更明确的控制。

没有人发布这个@Pekka 的解决方案......所以我会发布它。它可以帮助某人。

您不需要通过 Ajax 执行此操作。只需使用

window.location="download.action?para1=value1...."

你可以用 HTML5

注意：返回的文件数据必须是 base64 编码的，因为您不能对二进制数据进行 JSON 编码

在我的AJAX回复中，我有一个如下所示的数据结构：

{
    result: 'OK',
    download: {
        mimetype: string(mimetype in the form 'major/minor'),
        filename: string(the name of the file to download),
        data: base64(the binary data as base64 to download)
    }
}

这意味着我可以执行以下操作以通过 AJAX 保存文件

var a = document.createElement('a');
if (window.URL && window.Blob && ('download' in a) && window.atob) {
    // Do it the HTML5 compliant way
    var blob = base64ToBlob(result.download.data, result.download.mimetype);
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = result.download.filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

函数 base64ToBlob 取自此处，必须按照此函数使用

function base64ToBlob(base64, mimetype, slicesize) {
    if (!window.atob || !window.Uint8Array) {
        // The current browser doesn't have the atob function. Cannot continue
        return null;
    }
    mimetype = mimetype || '';
    slicesize = slicesize || 512;
    var bytechars = atob(base64);
    var bytearrays = [];
    for (var offset = 0; offset < bytechars.length; offset += slicesize) {
        var slice = bytechars.slice(offset, offset + slicesize);
        var bytenums = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            bytenums[i] = slice.charCodeAt(i);
        }
        var bytearray = new Uint8Array(bytenums);
        bytearrays[bytearrays.length] = bytearray;
    }
    return new Blob(bytearrays, {type: mimetype});
};

如果您的服务器正在转储要保存的文件数据，这很好。但是，我还没有完全弄清楚如何实现 HTML4 回退

让浏览器下载文件的简单方法是发出这样的请求：

 function downloadFile(urlToSend) {
     var req = new XMLHttpRequest();
     req.open("GET", urlToSend, true);
     req.responseType = "blob";
     req.onload = function (event) {
         var blob = req.response;
         var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
         var link=document.createElement('a');
         link.href=window.URL.createObjectURL(blob);
         link.download=fileName;
         link.click();
     };

     req.send();
 }

这将打开浏览器下载弹出窗口。

1. 框架不可知：Servlet 下载文件作为附件

<!-- with JS -->
<a href="javascript:window.location='downloadServlet?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadServlet?param1=value1" >download</a>

2. Struts2 Framework：动作下载文件作为附件

<!-- with JS -->
<a href="javascript:window.location='downloadAction.action?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadAction.action?param1=value1" >download</a>

使用<s:a>带有OGNL 的标记指向使用标记创建的URL会更好<s:url>：

<!-- without JS, with Struts tags: THE RIGHT WAY -->    
<s:url action="downloadAction.action" var="url">
    <s:param name="param1">value1</s:param>
</s:ulr>
<s:a href="%{url}" >download</s:a>

在上述情况下，您需要将Content-Disposition标头写入响应，指定文件需要下载 ( attachment) 而不是由浏览器打开 ( inline)。您还需要指定内容类型，并且您可能希望添加文件名和长度（以帮助浏览器绘制逼真的进度条）。

例如，下载 ZIP 文件时：

response.setContentType("application/zip");
response.addHeader("Content-Disposition", 
                   "attachment; filename=\"name of my file.zip\"");
response.setHeader("Content-Length", myFile.length()); // or myByte[].length...

使用 Struts2（除非您将 Action 用作 Servlet，例如直接流式传输的 hack ），您不需要直接向响应写入任何内容；只需使用Stream 结果类型并在 struts.xml 中对其进行配置即可：示例

<result name="success" type="stream">
   <param name="contentType">application/zip</param>
   <param name="contentDisposition">attachment;filename="${fileName}"</param>
   <param name="contentLength">${fileLength}</param>
</result>

3.Framework agnostic（/Struts2框架）：Servlet(/Action)在浏览器内打开文件

如果你想在浏览器中打开文件，而不是下载它，必须将Content-disposition设置为inline，但目标不能是当前窗口位置；您必须定位由 javascript 创建的新窗口、<iframe>页面中的一个或使用“讨论”目标 =“_blank”即时创建的新窗口：

<!-- From a parent page into an IFrame without javascript -->   
<a href="downloadServlet?param1=value1" target="iFrameName">
    download
</a>

<!-- In a new window without javascript --> 
<a href="downloadServlet?param1=value1" target="_blank">
    download
</a>

<!-- In a new window with javascript -->    
<a href="javascript:window.open('downloadServlet?param1=value1');" >
    download
</a>