Vue前端如何将后端返回的Base64数据转为可下载的XLS文件

一、验证响应是否为Base64格式 #

可以通过以下几种方式确认：

• 查看浏览器控制台的网络请求详情：找到对应请求的「响应」标签，若内容开头是类似 data:application/vnd.ms-excel;base64, 这样的前缀，或是由A-Z、a-z、0-9、+、/组成（末尾可能带=）的纯字符串，则可判定为Base64格式。
• 用正则表达式校验：在控制台执行以下代码，传入响应的res.data，返回true则符合Base64格式规则：

  const isBase64 = (str) => {
    const base64Regex = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)?$/;
    // 去掉可能的data URI前缀
    const pureStr = str.replace(/^data:.+;base64,/, '');
    return base64Regex.test(pureStr);
  };
  console.log(isBase64(res.data));
  

• 解码测试：尝试对字符串解码，若能正常解析出二进制数据且无报错，也可验证是有效Base64。

二、将Base64转为Blob并实现下载 #

后端返回的Base64字符串需要先解码为二进制数组，再转为Blob，最后触发下载。完整代码示例如下：

getXlsFile(data)
  .then((res) => {
    // 1. 处理Base64字符串：去掉可能的data URI前缀
    const base64Str = res.data.replace(/^data:.+;base64,/, '');
    // 2. 解码Base64为二进制数组
    const byteCharacters = atob(base64Str);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    // 3. 转为Blob，XLS文件的MIME类型为application/vnd.ms-excel
    const blob = new Blob([byteArray], { type: 'application/vnd.ms-excel' });
    // 4. 创建下载链接并触发下载
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'report.xls';
    document.body.appendChild(a);
    a.click();
    // 清理资源
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  })
  .catch(err => {
    console.error('文件下载失败:', err);
  });

额外注意事项 #

• 确保后端返回的Base64字符串是纯编码内容，如果带有data:xxx;base64,前缀，一定要先去掉再解码，否则会导致文件损坏。
• 如果你的请求库（比如axios）默认将响应解析为JSON，无需额外配置，直接获取res.data即可；若之前设置了responseType: 'blob'，则需要调整为默认的json类型，因为后端返回的是包含Base64的JSON对象。

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