【Ant.design pro】下载二进制文件

下载接口

需要设置数据类型 responseType:'blob',
将response返回的二进制数据，将其处理作为文件下载到本地

// 下载
export async function download_xml(
  body: API.AddUserParams,
){
  return request<API.UserListResultData>('/api/download_xml', {
    method: 'POST',
    headers:{
      'token':`${localStorage.getItem('token')}`
    },
    responseType:'blob',
    data: body
  });
}

URL.createObjectURL方法

• response就是返回Blob、file等二进制文件
• 以URL.createObjectURL方法转换成浏览器可以直接显示的URL地址

//这里我们以后端返回的工作流pdf文件为例
const response=new Blob({type: 'application/pdf'},[response.data])
const url=URL.createObjectURL(response) // 创建一个指向Blob对象的URL
console.log("url",url)

js的写法
// 创建一个临时的<a>标签
const a = document.createElement('a');
a.href = url;
a.download = '下载的文件名'; // 设置下载的文件名
// 将<a>标签添加到文档中（对于某些浏览器是必要的）
document.body.appendChild(a);
a.click(); // 触发点击事件以下载文件
// 移除<a>标签
document.body.removeChild(a);
// 释放URL对象
URL.revokeObjectURL(url);

实现的效果:

<a :href='{{url}}' download='下载的文件名' >下载文件</a>