问题描述：

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

后端代码：

Header("Content-type: application/octet-stream");
Header("Accept-Ranges: bytes");

前端代码：

$.ajax({type: "POST",url: url,xhrFields: { responseType: "blob" },success: (response) => {const blob = new Blob(["\ufeff", 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();}})

word 文档内容乱码：

原因分析：

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 typeconst 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);

文件下载成功截图：

前端 js jQuery ajax实现文件流下载, 下载doc,xsl等文件内容乱码问题相关推荐

普通文件下载 + 前端获取后端返回的文件流并下载
参考资料前端接受后端文件流并下载的几种方法 ajax 请求二进制流图片文件 XMLHttpRequest 请求并处理二进制流数据之最佳实践 ajax请求二进制流进行处理(ajax异步下载文件) ...
react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
element一次上传多个文件，并将文件名展示出来；使用文件流进行下载
1.文件批量上传 <el-form-item label="项目资料:" prop="attachmentVos"><!-- 上传的文件进行回 ...
C++文件流：myfstream，fstream，文件读写，随机文件读写【C++文件流】（59）
文件流 myfstream fstream Test myfstream fstream 流对象的定义流对象关联文件 open 函数打开方式关闭流对象文件读写读写文本文件读写接口读一字/ ...
02功能之读写文件流操作(C语言实现读取文件指定一行)
02功能之读写文件流操作(C语言实现读取文件指定一行) 1 C语言读取文件指定一行 // 读取文件指定一行 int ReadLine1(const char *fileName, char outBu ...
前端接收pdf文件_原生ajax请求获取pdf文件流本地下载（支持谷歌IE）
项目中要实现本地下载pdf文件,ajax请求获取到文件全路径,如上,a标签href属性赋值跳转,在iframe里面,谷歌浏览器被阻止下载.那只能另想办法.经过几天的摸索和后台调整接口数据流,终于解决. ...
前端处理后端返回的excel文件流并下载
项目中遇到上传excel,后端写的接口是当重复上传相同信息的excel时会吐出excel二进制文件流,这种文件流需要前端下载供用户看. 首先后端的接口需要上传文件已formData形式上传这里我用的 ...
vue 接收后端文件流并下载
在vue框架中, 接收并下载文件流(blob对象) 可以通过将其转成blob对象,添加到a标签或者iframe标签中来模拟下载(或者pdf预览) 1.首先设置responseType对象格式为 blo ...
实现简单的PHP接口，以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[' ...

前端 js jQuery ajax实现文件流下载, 下载doc,xsl等文件内容乱码问题

问题描述：

原因分析：

解决方案：

前端 js jQuery ajax实现文件流下载, 下载doc,xsl等文件内容乱码问题相关推荐

最新文章

热门文章