Vue.js与Rails项目中下载XLSX文件损坏问题求助

我有一个返回二进制Excel文件的Rails API，代码如下：

def download_result
  data = ...
  send_data(
    data,
    filename: 'test.xlsx',
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  )
end

在Vue.js中，我通过以下代码尝试下载该文件：

downloadResult ({ commit, dispatch, rootGetters }, id) {
  return new Promise((resolve, reject) => {
    dispatch('downloadResult', { id })
    .then(response => {
        const url = window.URL.createObjectURL(new Blob([response]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'test.xlsx')
        document.body.appendChild(link)
        link.click()
    })
  })
}

问题现象 #

• 直接在新标签页打开API地址，文件能正常下载并在Excel中打开
• 通过Vue代码下载后的文件，打开时提示损坏

解决方案 #

1. 修复请求响应类型（核心问题）

默认情况下，axios（假设你使用axios发起请求）会把响应解析为JSON，这会破坏二进制文件的原始结构。必须在请求时指定responseType: 'blob'，确保浏览器保留原始二进制数据：

// 示例API请求方法，添加responseType配置
async function fetchDownloadResult(id) {
  return await axios.get(`/api/download_result/${id}`, {
    responseType: 'blob'
  });
}

2. 修正Vue Action的递归调用问题

你的代码中存在递归调用dispatch('downloadResult', { id })的问题，会导致无限循环，需要替换为实际的API请求：

downloadResult ({ commit, dispatch, rootGetters }, id) {
  return new Promise((resolve, reject) => {
    fetchDownloadResult(id)
    .then(response => {
        // 直接使用响应返回的Blob对象
        const url = window.URL.createObjectURL(response.data)
        const link = document.createElement('a')
        link.href = url
        
        // 可选：从响应头获取服务器指定的文件名
        const contentDisposition = response.headers['content-disposition']
        if (contentDisposition) {
          const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/)
          link.setAttribute('download', filenameMatch ? filenameMatch[1] : 'test.xlsx')
        } else {
          link.setAttribute('download', 'test.xlsx')
        }
        
        document.body.appendChild(link)
        link.click()
        
        // 清理资源，避免内存泄漏
        window.URL.revokeObjectURL(url)
        document.body.removeChild(link)
        resolve()
    })
    .catch(error => reject(error))
  })
}

3. Rails端优化（可选）

在Rails的send_data中添加disposition: 'attachment'，确保响应头包含标准的Content-Disposition字段，方便前端获取文件名：

def download_result
  data = ...
  send_data(
    data,
    filename: 'test.xlsx',
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    disposition: 'attachment'
  )
end

原因说明 #

当未指定responseType: 'blob'时，请求库会将二进制数据按UTF-8字符串解析，这会破坏Excel文件的二进制结构（Excel是压缩包格式，包含非UTF-8字节），导致下载后的文件损坏。指定响应类型为blob后，浏览器会直接保留原始二进制数据，生成的文件自然正常。

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