如何下载后端返回的Base64格式.docx文件？下载后损坏如何解决？

常见原因 #

• 后端返回的FileData为base64编码格式，未解码直接传入Blob构造函数，导致Blob存储的是base64字符串的UTF-8编码，而非docx文件的原始二进制流，这是该类问题的最高发原因
• 发送文件下载请求时未指定响应类型，导致二进制响应被前端框架强制转码为UTF-8字符串，字节内容被篡改
• fileSource.FileType参数值错误，docx文件的正确MIME类型为application/vnd.openxmlformats-officedocument.wordprocessingml.document，若传入doc格式的MIME类型或其他错误值也可能导致文件损坏

对应修复方案 #

方案1：base64转二进制流后生成Blob #

如果确认FileData是base64编码，使用如下代码处理：

// 解码base64字符串为二进制
const binaryStr = window.atob(fileSource.FileData);
const byteArray = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
  byteArray[i] = binaryStr.charCodeAt(i);
}
const blob = new Blob([byteArray], { 
  // 固定写docx的正确MIME类型，避免后端返回值错误
  type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
});
FileSaver.saveAs(blob, (fileSource as FileAttachmentDetail).FileName);

方案2：调整请求参数指定响应类型 #

如果是直接请求二进制流的接口，在请求时新增响应类型配置，以axios为例：

axios.get('/your/download/api', {
  // 必须指定responseType为blob，禁止框架自动转码响应内容
  responseType: 'blob'
}).then(res => {
  const blob = new Blob([res.data], {
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  });
  FileSaver.saveAs(blob, 'target.docx');
})

简易验证方法 #

用文本编辑器打开下载后的损坏文件：

• 如果内容是由A-Z、a-z、0-9、+、/、=组成的连续字符串，可确认是base64未解码问题
• 如果内容开头有明显的UTF-8乱码之外的可读字符，可确认是响应被转码导致的字节损坏

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