如何在同一个Servlet中实现文件下载并显示HTML状态页面？

你之所以失败，核心原因有两个：

1. 文件下载的响应头（Content-Disposition: attachment）会告诉浏览器把整个响应体当作文件处理，不会解析其中的HTML内容；
2. Servlet规范本身禁止同时使用OutputStream和PrintWriter，哪怕绕开API限制，浏览器的行为逻辑也不支持这种混合输出。

永远不要尝试在同一个Servlet响应中混合文件下载和HTML输出，正确的做法是拆分请求，用以下两种方式实现：

方案1：先返回状态页面，自动触发文件下载 #

先让Servlet返回HTML状态页面，再通过页面内的JavaScript自动发起文件下载请求。

状态页面Servlet代码 #

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    
    // 输出状态页面
    out.println("<html><body>");
    out.println("<h3>文件正在下载，请稍候...</h3>");
    out.println("<p id='status'>等待下载开始...</p>");
    
    // 用JS自动触发下载请求
    String encodedFilePath = URLEncoder.encode(bf.path, "UTF-8");
    out.println("<script>");
    out.println("window.onload = function() {");
    out.println("    const downloadUrl = '" + request.getContextPath() + "/download?path=" + encodedFilePath + "';");
    out.println("    const a = document.createElement('a');");
    out.println("    a.href = downloadUrl;");
    out.println("    a.style.display = 'none';");
    out.println("    document.body.appendChild(a);");
    out.println("    a.click();");
    out.println("    document.body.removeChild(a);");
    out.println("    document.getElementById('status').textContent = '下载已启动，文件会自动保存到本地';");
    out.println("}");
    out.println("</script>");
    out.println("</body></html>");
}

专门的文件下载Servlet代码 #

@WebServlet("/download")
public class DownloadServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取并解码文件路径
        String filePath = URLDecoder.decode(request.getParameter("path"), "UTF-8");
        File file = new File(filePath);
        
        // 设置下载响应头
        response.setContentType("application/octet-stream");
        response.setHeader("Content-Disposition", 
            "attachment; filename=\"" + URLEncoder.encode(file.getName(), "UTF-8") + "\"");
        
        // 输出文件内容
        try(InputStream in = new FileInputStream(file);
            ServletOutputStream out = response.getOutputStream()) {
            byte[] buffer = new byte[1024];
            int numBytesRead;
            while ((numBytesRead = in.read(buffer)) > 0) {
                out.write(buffer, 0, numBytesRead);
            }
            out.flush();
        }
    }
}

方案2：在页面中实时显示下载进度 #

如果需要更细致的状态提示（比如下载百分比），可以用XMLHttpRequest监听下载进度，再触发文件保存：

状态页面中的JS代码片段 #

window.onload = function() {
    const statusElem = document.getElementById('status');
    const progressElem = document.getElementById('progress');
    const downloadUrl = '/download?path=xxx'; // 替换为实际下载地址

    const xhr = new XMLHttpRequest();
    xhr.open('GET', downloadUrl, true);
    xhr.responseType = 'blob';

    // 监听下载进度
    xhr.onprogress = function(e) {
        if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            progressElem.textContent = `已下载：${percent.toFixed(2)}%`;
        }
    };

    // 下载完成后触发保存
    xhr.onload = function() {
        if (xhr.status === 200) {
            const blob = new Blob([xhr.response]);
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = '目标文件名.ext'; // 替换为实际文件名
            a.click();
            URL.revokeObjectURL(url);
            statusElem.textContent = '文件下载完成！';
            progressElem.textContent = '';
        } else {
            statusElem.textContent = '下载失败，请重试';
        }
    };

    xhr.send();
}

内容的提问来源于stack exchange，提问作者tiamat