利用 jQuery.Ajax 实现文件下载的完整指南

2024-03-08 21:51:23

使用 jQuery.Ajax 实现文件下载

问题

如何利用 jQuery.Ajax 调用 Struts2 文件下载操作，从而在前端触发文件下载窗口，允许用户保存文件到本地？

解决方案

1. 服务器端设置

1.1 Struts2 操作

@Action(name = "download")
public class DownloadAction extends ActionSupport {

    private InputStream imageStream;
    private String fileName;

    @Override
    public String execute() throws Exception {
        imageStream = new FileInputStream(new File("文件路径"));
        fileName = "文件名.扩展名";
        return SUCCESS;
    }
}

2. 前端 Ajax 请求

$.ajax({
    url: "/download.action",
    method: "POST",
    data: {
        // 其他参数
    },
    xhrFields: {
        responseType: 'blob'
    },
    success: function(data) {
        var blob = new Blob([data], { type: 'application/octet-stream' });
        var url = window.URL.createObjectURL(blob);
        window.location = url;
    }
});

关键点

responseType： 指定响应类型为 Blob 对象（二进制数据）。
createObjectURL： 创建指向 Blob 对象的 URL。
window.location： 将浏览器的地址栏指向 Blob 对象的 URL，触发文件下载。

示例代码

<button onclick="downloadFile()">下载文件</button>

<script>
function downloadFile() {
    $.ajax({
        url: "/download.action",
        method: "POST",
        data: {
            // 其他参数
        },
        xhrFields: {
            responseType: 'blob'
        },
        success: function(data) {
            var blob = new Blob([data], { type: 'application/octet-stream' });
            var url = window.URL.createObjectURL(blob);
            window.location = url;
        }
    });
}
</script>

结论

通过遵循上述步骤，你可以利用 jQuery.Ajax 从 Struts2 服务器端下载文件，并在前端触发文件下载窗口，让用户可以轻松保存文件。

常见问题解答

为什么需要将响应类型设置为 Blob 对象？
- Blob 对象允许浏览器处理二进制数据，并将其保存为文件。
createObjectURL 函数有什么作用？
- 该函数创建了一个指向 Blob 对象的 URL，浏览器可以通过该 URL 下载文件。
为什么需要修改 window.location？
- 修改 window.location 将浏览器的地址栏指向 Blob 对象的 URL，从而触发文件下载。
是否有其他方法可以触发文件下载？
- 是的，可以通过创建标签并将其 href 属性设置为 Blob 对象的 URL 来触发文件下载。