vue3.0前端开源框架vben请求接口配置返回内容数据类型
返回内容配置responseType的值共有一下几种:
(1) arraybuffer
(2) blob
(3) document
(4) json
(5) text
(6) stream
问题描述:下载文件功能后台接口返回数据流的形式下载成功之后打不开xlsx文件
解决方式:直接代码
export const downNumbers = (params?: any) =>
defHttp.post<any>(
{ url: Api.downNumbers, params, responseType: 'blob' },
{ errorMessageMode: 'none', isTransformResponse: false },
);
注: 配置项 reponseType:’ 'blob '*为关键 必须配置,因为需要使用vben框架封装的数据流转文件方法,代码如下:
/**
* Download according to the background interface file stream
* @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);
}
注:此方法接受data数据流参数必须是blob类型,亲测别的类型会出现下载成功之后文件打不开的现象