JavaScript从Blob生成的docx文件内容全为[Object Object]问题求助

核心错误原因 #

问题出在前端请求和Blob构造两个环节：

• axios默认会将响应内容按照JSON格式解析，不会返回原始二进制文件流
• 构造Blob时错误传入了整个axios响应对象res，而非响应体内的二进制数据res.data，Blob会将对象自动转为[Object Object]字符串写入文件，导致生成的docx内容异常

前端代码修改方案 #

给axios请求添加responseType: 'blob'配置，同时修改Blob构造参数为res.data，修改后代码如下：

// 新增第三个配置参数指定响应类型为blob
axios.post(route, data, { responseType: 'blob' }).then((res) => {
    const filename = "report.docx"
    // 这里把res改为res.data取实际二进制内容
    var blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    var link = document.createElement('a');                     
    var URL = window.URL || window.webkitURL;
    var downloadUrl = URL.createObjectURL(blob);
    link.href = downloadUrl;
    link.style = "display: none";
    link.download = filename;
    document.body.appendChild(link)
    link.click()
    // 释放blob占用的内存
    URL.revokeObjectURL(downloadUrl)
    link.remove()       
});

后端可选优化 #

如果后续需要支持中文文件名，可对Content-Disposition的文件名做URL编码，避免乱码：

from django.utils.http import urlquote

response['Content-Disposition'] = 'attachment; filename=%s' % urlquote(report_filename)

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