react中的文件下载

发布于:2025-03-16 ⋅ 阅读:(13) ⋅ 点赞:(0)
export async function download(url, params) {  

    const urls = /api/${url}?${stringify(params)};
    const response = await fetch(urls, {
        method: 'GET',
        headers: {
            Authorization: Basic c3dvcmQ6c3dvcmRfc2VjcmV0,
            'Blade-Auth': Bearer ${getAccessToken()},
            'Content-Type': 'application/x-www-form-urlencoded',
         
        },
    });

    if (!response.ok) {
        throw new Error(HTTP error! status: ${response.status});
    }

    const blob = await response.blob();
    const contentDisposition = response.headers.get('content-disposition');

    const filename = decodeURIComponent(contentDisposition).split('=')[1];
    const urlBlob = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    if (blob) {
        a.href = urlBlob;
        a.download = filename;
        document.body.appendChild(a);

        a.click();
        a.remove();
        window.URL.revokeObjectURL(urlBlob);
        return true;
    }
}

以上是相关的说明

download 方法是一个用于下载文件的异步函数,主要功能如下:

  1. 构建请求 URL

    • 使用 stringify(params) 将参数转换为查询字符串,并拼接到 url 上。
    • 拼接后的 URL 形如 /api/yourEndpoint?key=value
  2. 发送 GET 请求

    • 通过 fetch 发送请求,携带 AuthorizationBlade-Auth 认证头。
    • 设置 Content-Typeapplication/x-www-form-urlencoded
  3. 错误处理

    • 如果 response.okfalse,抛出 HTTP 错误。
  4. 处理响应

    • 将返回的数据转换为 blob(二进制文件)。
    • content-disposition 头中提取文件名。
  5. 创建并触发下载

    • 通过 URL.createObjectURL 生成 Blob URL。
    • 创建 <a> 标签并设置 hrefdownload 属性,模拟用户点击下载文件。
    • 下载完成后移除 <a> 标签并释放 Blob URL。
  6. 返回下载状态

    • 如果文件成功下载,返回 true