资料下载Blob流

最新推荐文章于 2024-05-28 09:19:19 发布

徐来亦欢

最新推荐文章于 2024-05-28 09:19:19 发布

阅读量1.7k

点赞数

分类专栏：日常记录文章标签： javascript

本文链接：https://blog.csdn.net/chad_xu/article/details/126583069

版权

本文介绍了在JavaScript中处理下载需求的方法，通过设置接口请求的responseType为'blob'，并在回调中利用原生a标签结合download属性实现文件下载。

摘要由CSDN通过智能技术生成

在开发中涉及到下载需求，日常进行记录

1. API解耦之后，在接口请求接口里写入 responseType: "blob"

/**
 * 选择性导出为excel
 * @param {end,start} params 开始时间和结束时间
 * @returns
 */
export function volunExcel(params) {
  return request({
    url: "/check/excel",
    method: "GET",
    params,
    responseType: "blob",
  });
}

2. 在该请求的回调里，原生创建a标签，并设置其URL及属性（download属性，设置下载后的文件名）

      volunExcel({
        start: startTime,
        end: endTime,
      }).then((res) => {
        const link = document.createElement("a");
        link.target = "_blank";
        link.style.display = "none";
        link.href = window.URL.createObjectURL(new Blob([res]));
        //方式一：强制设置下载后的文件名为志愿者报名统计.xlsx
        link.setAttribute("download", "志愿者报名统计.xlsx"