Vue+Axios调用ASP.NET Core下载Azure Blob文件无自动响应求助

问题场景 #

我开发的应用前端基于Vue.js、后端采用ASP.NET Core，通过Axios请求后端从Azure Blob获取Zip文件并下载到客户端。当前存在的问题是：前端发起请求后无自动下载响应，必须打开F12网络面板双击响应名称，文件才会开始下载。

问题原因 #

Axios默认以JSON格式处理响应，对于后端返回的二进制文件流，不会自动触发浏览器的下载行为。浏览器仅会在直接发起的页面请求（如a标签跳转）或手动触发响应处理时才会启动下载。

解决方案 #

方案1：修改Axios请求配置，手动触发下载 #

给Axios请求指定responseType: 'blob'以正确接收二进制流，然后通过创建Blob对象和临时下载链接，模拟浏览器点击行为触发下载：

this.$axios.get(process.env.API.EQUIPMENT_OTHER_DOWNLOADZIP + '?' + queries, {
  responseType: 'blob' // 关键配置：指定响应为二进制Blob类型
})
.then((response) => {
  // 从响应头解析文件名（后端已通过File方法自动设置Content-Disposition）
  const contentDisposition = response.headers['content-disposition']
  let fileName = '下载文件.zip'
  if (contentDisposition) {
    const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
    if (fileNameMatch?.[1]) {
      fileName = decodeURIComponent(fileNameMatch[1].replace(/['"]/g, ''))
    }
  }

  // 创建Blob对象并生成临时下载URL
  const blob = new Blob([response.data], { type: 'application/zip' })
  const downloadUrl = window.URL.createObjectURL(blob)

  // 创建临时a标签触发下载
  const link = document.createElement('a')
  link.href = downloadUrl
  link.download = fileName
  document.body.appendChild(link)
  link.click()

  // 清理临时资源
  window.URL.revokeObjectURL(downloadUrl)
  document.body.removeChild(link)
})
.catch(err => {
  console.error('下载失败:', err)
})

方案2：直接使用a标签跳转（无需Axios，更简洁） #

如果不需要在请求过程中处理复杂逻辑（如加载状态、错误弹窗），直接通过a标签发起请求，浏览器会自动处理文件下载：

// 构造完整下载URL
const downloadUrl = process.env.API.EQUIPMENT_OTHER_DOWNLOADZIP + '?' + queries

// 创建临时a标签触发下载
const link = document.createElement('a')
link.href = downloadUrl
link.download = '默认文件名.zip' // 可选，后端返回的文件名会覆盖此值
document.body.appendChild(link)
link.click()
document.body.removeChild(link)

也可以在Vue模板中使用隐藏的a标签，通过按钮点击触发：

<template>
  <button @click="startDownload">下载Zip文件</button>
  <a ref="downloadLink" style="display: none;"></a>
</template>

<script>
export default {
  methods: {
    startDownload() {
      const downloadUrl = process.env.API.EQUIPMENT_OTHER_DOWNLOADZIP + '?' + queries
      this.$refs.downloadLink.href = downloadUrl
      this.$refs.downloadLink.click()
    }
  }
}
</script>

后端验证 #

你的ASP.NET Core后端代码已经正确返回了文件流和对应的Content-Type、Content-Disposition头，无需额外修改：

public async Task<ActionResult> GetZipFile(string fileValue, string fileName)
{
  byte[] result = this.equipmentCSVLinkService.GetZipFile(fileValue);
  return this.File(result, MediaTypeNames.Application.Zip, fileName + ".zip");
}

内容的提问来源于stack exchange，提问作者ken hayashi