获取数据都知道,使用的是 axios,主要是设置 responseType: 'blob'
由于项目使用的是 apipost ,所以在使用的时候还要设置 isReturnNativeResponse -是否返回本机响应标头,一般可能设置 responseType: 'blob' 就可以了
export function getDownZip(params?: object) {
return defHttp.get(
{ url: Api.downZip, params: params, responseType: 'blob' },
{ isTransformResponse: false, isReturnNativeResponse: true },
);
}
通过上面接口返回的数据就能直接使用下面方法下载
/**
* result.data 是对应的文件,具体的看返回数据,不一定存放在data中
* 名称
* 后缀名
*/
async function getData() {
const result = await getDownZip({});
downloadByData(result.data, '测试', 'application/json');
}
/**
* 根据后台接口文件流下载
* @param {*} data
* @param {*} filename
* @param {*} mime
* @param {*} bom
*/
export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
const blobURL = window.URL.createObjectURL(blob);
const tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename);
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
window.URL.revokeObjectURL(blobURL);
}
还可以通过 header中的content-disposition获取 fileName,成为文件的下载名称
可能会存在乱码问题,可以使用 decodeURIComponent 解决;
//从header中读取文件名称
const headerFilename = result.headers['content-disposition']?.split(';')[1].split('=')[1];
const fileName = decodeURIComponent(headerFilename);
downloadByData(result.data, fileName, 'application/json');
可能会在header中无法获取到 content-disposition ;
① 拦截时,只返回了部分数据,
②后台没有返回 content-disposition 参数,需要后台搞一下;
如果后台说他已经给了这个参数,而前端获取不到的话;
可能就是因为cros跨域,浏览器只会返回默认头部的header,并不能完全获取后端自定义的所有数据,
因此,需要后端在header中添加 Access-Control-Expose-Headers 信息