后端返回二进制内容时 $.ajax请求返回乱码问题

前端通过jQuery ajax接受后端的文件流,前端下载文件后内容乱码

原因分析:
jQuery ajax response 类型只能是:xml, html,script,json,jsonp,text。 无法接受blob类型的response。 当后端返回给前端一个文件流的时候,前端ajax会将文件流转化成string 类型。 无法正确读取改文件流,导致文本内容乱码。

解决方案:

前端在实现文件下载功能时,请不要使用ajax请求。我们可以使用XMLHttpRequest来代替ajax, 请看下面的代码:

 

const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
//定义responseType='blob', 是读取文件成功的关键,这样设置可以解决下载文件乱码的问题
xhr.responseType = "blob";    
xhr.onload = () => {
//'\ufeff' 这个变量是定义字符集为utf-8, 防止中文乱码的问题。
// {type: 'application/msword'} 根据文档类型来定义这个type。MIMA type
  const blob = new Blob(["\ufeff", xhr.response], {type: 'application/msword'});
  const blobUrl = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = blobUrl;
  a.target = '_blank';
  a.click();
  }              
};
             
xhr.send(null);

 

posted @ 2022-12-05 11:55  曲琦  阅读(687)  评论(0编辑  收藏  举报