如何通过Ajax在客户端保存Python生成的Docx文件（Django场景）

后端修改（Django视图） #

不需要将文件保存到服务器，改用内存字节流存储生成的docx内容，再通过HttpResponse返回给前端：

from docx import Document
from io import BytesIO
from django.http import HttpResponse

def generate_docx(request):
    # 生成docx文档内容
    document = Document()
    document.add_heading('My docx', 0)
    
    # 将文档写入内存字节流，避免写入服务器磁盘
    buffer = BytesIO()
    document.save(buffer)
    buffer.seek(0)  # 将文件指针重置到开头，确保能完整读取
    
    # 构造响应，设置正确的MIME类型和下载头
    response = HttpResponse(
        buffer,
        content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    )
    # 指定下载文件名，告诉浏览器以附件形式处理
    response['Content-Disposition'] = 'attachment; filename="myFile.docx"'
    return response

前端Ajax处理 #

由于是下载二进制文件，需要将请求的响应类型设为blob，再通过创建临时链接触发浏览器下载：

原生JS实现

function downloadDocx() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/你的生成docx接口路径/', true);
    xhr.responseType = 'blob';  // 明确指定响应为二进制blob类型
    
    xhr.onload = function() {
        if (this.status === 200) {
            // 创建Blob对象和临时下载链接
            const blob = new Blob([this.response], { 
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
            });
            const downloadUrl = URL.createObjectURL(blob);
            const aTag = document.createElement('a');
            
            aTag.href = downloadUrl;
            aTag.download = 'myFile.docx';
            document.body.appendChild(aTag);
            aTag.click();
            
            // 清理临时资源，避免内存泄漏
            URL.revokeObjectURL(downloadUrl);
            document.body.removeChild(aTag);
        }
    };
    
    xhr.send();
}

jQuery实现（需配置响应类型）

$.ajax({
    url: '/你的生成docx接口路径/',
    type: 'GET',
    xhrFields: {
        responseType: 'blob'  // 关键：设置响应为二进制类型
    },
    success: function(blob) {
        const downloadUrl = URL.createObjectURL(blob);
        $('<a>', {
            href: downloadUrl,
            download: 'myFile.docx'
        }).appendTo('body').click().remove();
        
        URL.revokeObjectURL(downloadUrl);
    }
});

关键注意点 #

• 后端必须使用正确的docx MIME类型，不能用application/vnd这种模糊类型，否则浏览器可能无法识别文件格式
• 前端必须设置responseType: 'blob'，否则会把二进制内容当成文本解析，导致下载的docx文件损坏
• 通过Content-Disposition头指定文件名和下载方式，确保浏览器触发下载而非直接打开文件

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