如何从Blob生成Excel文件？解决文件显示[object Blob]异常

你的问题核心是错误地将已有的Blob对象再次包装进新Blob，导致文件内容变成了[object Blob]字符串，同时没有正确读取Blob的原始内容。以下是具体解决方法：

1. 先将Blob解码为文本/字符串 #

使用FileReader可以读取Blob的内容并转为字符串，之后你可以将字符串分割成目标数组格式：

AbsentiesService.getCsvByGroep(emptyQuery, groepId).then((response) => {
  const reader = new FileReader();
  
  // 读取完成后获取文本内容
  reader.onload = function(e) {
    const rawText = e.target.result;
    console.log(rawText); // 输出类似"bert,38,new york\nalice,29,london"的文本
    
    // 将文本转为二维数组（按行和逗号分割）
    const dataArray = rawText.split('\n').map(line => line.split(','));
    console.log(dataArray); // 输出[[bert,38,new york], [alice,29,london]]
    
    // 后续生成可正常打开的文件
    generateDownloadFile(rawText);
  };
  
  // 读取Blob对象为文本（默认UTF-8编码，若后端用其他编码可传入第二个参数，比如'ISO-8859-1'）
  reader.readAsText(response.data);
});

2. 生成可正常打开的Excel兼容文件 #

后端返回的是CSV格式数据，直接用text/csv类型生成Blob即可，Excel能正常识别：

function generateDownloadFile(textContent) {
  const blob = new Blob([textContent], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.csv'); // 保存为CSV，Excel可直接打开
  document.body.appendChild(link);
  link.click();
  
  // 清理资源，避免内存泄漏
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

关键注意点 #

• 不要将已有的Blob对象再次包装进new Blob()的数组参数中，否则会触发Blob的toString()方法，导致内容变为[object Blob]。
• 后端返回的是CSV数据，设置type: 'text/csv'比application/vnd.ms-excel更准确，能避免文件打开异常。

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