返回的数据是一堆乱码,并且无法下载
在请求接口中设置responseType:'blob',可以正常下载
当将responseType设置为一个特定的类型时,你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。如果两者类型不兼容,就会发现服务器返回的数据变成了null
responseType 的作用就是设置ajax数据响应的类型,告诉服务器,让服务器返回什么样的数据类型给你
值 数据类型 ‘’ DOMString (这个是默认类型) arraybuffer ArrayBuffer对象 blob Blob对象 document Document对象 json JS 对象 , 解析得到的从服务器返回来的JSON字符串 text DOMString
Blob文件流的下载
<a>
标签的download
是HTML5
标准新增的属性,作用是指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。另外,download属性的值可以指定下载文件的名称。
Downloads(row).then((res) => {
console.log(res);
let blob = new Blob([res], {type: "application/vnd.ms-excel"});
let url = window.URL.createObjectURL(blob);
// window.location.href = url; //本窗口打开直接下载
// 重命名 创建a标签
var a = document.createElement('a');
// 下载a 标签中 href 指向的文件,根据 download 中设定的值,对文件进行重命名。
a.href = url
// 设置文件名,不写默认原文件名称
a.download = '新文件名'
a.click()
});
请求后端接口时,设置responseType:'blob',解决乱码
//封装的axios请求
export function Downloads(fileName) {
return http({
method: "get",
url: `/Down/Downloads/${file}`,
data: {},
//设置返回类型为blob
responseType:'blob'
});
}