vue+axios+blob导出excel---提示文件损坏解决

1.接口部分

注意点1：此处直接resolve(response)，而不是(response.data)，因为数据处理部分需要拿到后端放在header里面的文件名fileName

注意点2：需要写responseType: 'blob'，而且位置放在data同级的对象里，如下图，不然下载后的文件打不开，提示文件损坏

export const apiExportCusGroup = params => {
	return new Promise((resolve, reject) => {
		
		instance.post(
			baseApi+'/api/console/customer/customerExport',
			{
				customerIds: params.customerIds,
			},
			{
				responseType: 'blob',
			}
		)
		.then(response => {
			resolve(response)
		})
		.catch(error => {
			reject(error)
		})
	})
}

 

2.数据处理部分

apiExportCusGroup(formData).then(response => {
    const link = document.createElement('a');
    let blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
    link.style.display = 'none';
    link.href = URL.createObjectURL(blob);//创建url对象
    link.download = response.headers['content-disposition'].substr(20); //下载后文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);//销毁url对象
}).catch(err => {
    console.log(err);
})