Vue 下载文件流,重命名 无法获取 "Content-Disposition"

//这句要加,否则前端获取不到 "Content-Disposition"
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("Content-Disposition", "attachment; filename=" + downloadName);

Vue

  downloadLog(queryParams: CustodyPageQuery) {
    return request({
      url: `/logger/download`,
      method: "post",
      data: queryParams,
      responseType: "blob",
    });
  },
  

//下载APP日志
const onAppLoggerDownLoad = async (row: OrderVO) => {
  queryParams.PhoneNo = row.MemberPhoneNo;
  queryParams.StartTime = row.StartTime;
  queryParams.EndTime = row.EndTime;
  CustodyOrderAPI.downloadLog(queryParams).then((response: any) => {
    console.log("response", response.headers);
    const fileData = response.data;
    // content-disposition 要小写
    const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
    const fileType = "application/octet-stream;charset=utf-8";

    const blob = new Blob([fileData], { type: fileType });
    const downloadUrl = window.URL.createObjectURL(blob);
    const downloadLink = document.createElement("a");
    downloadLink.href = downloadUrl;
    downloadLink.download = fileName;

    document.body.appendChild(downloadLink);
    downloadLink.click();

    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(downloadUrl);
  });
};
posted @ 2025-09-04 15:05  VipSoft  阅读(45)  评论(0)    收藏  举报