Angular 17保存Web API返回的MP3文件损坏问题求助

核心问题 #

你的代码存在两个关键问题：

1. Blob类型错误：生成Blob时指定了audio/ogg类型，但实际处理的是MP3文件，类型不匹配会导致播放器无法识别文件。
2. 字节数组传输编码问题：C#将字节数组封装在模型中返回时，JSON序列化会自动把字节数组转为Base64字符串，你直接将这个字符串塞进Blob，没有解码成原始二进制数据，导致文件损坏。

解决方案1：修正Angular代码（适配Base64编码的字节数组） #

如果保持现有API返回结构，需要先将Base64字符串解码为Uint8Array，再生成Blob：

// 处理Base64编码的字节数组
const base64String = data.content;
const byteCharacters = atob(base64String);
const byteArray = new Uint8Array(byteCharacters.length);

for (let i = 0; i < byteCharacters.length; i++) {
  byteArray[i] = byteCharacters.charCodeAt(i);
}

// 生成正确类型的Blob
const blob = new Blob([byteArray], { type: 'audio/mpeg' });
const downloadURL = window.URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = downloadURL;
link.download = 'test.mp3';
link.click();

// 释放URL对象，避免内存泄漏
window.URL.revokeObjectURL(downloadURL);

解决方案2：优化C# API（直接返回二进制文件） #

如果可以修改API，建议直接返回二进制文件而非封装在模型中，这样前端处理更简单，也避免编码问题：

C# API代码

[HttpGet("get-speech")]
public IActionResult GetSpeech()
{
    // 谷歌文本转语音生成的MP3字节数组
    byte[] mp3Bytes = GoogleTextToSpeech.GenerateMp3("你的文本内容");
    
    // 直接返回文件结果，指定正确的MIME类型
    return File(mp3Bytes, "audio/mpeg", "test.mp3");
}

对应Angular代码

import { HttpClient } from '@angular/common/http';

// 在组件/service中注入HttpClient
constructor(private http: HttpClient) {}

downloadSpeech() {
    this.http.get('/api/get-speech', { responseType: 'blob' }).subscribe(blob => {
        const downloadURL = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadURL;
        link.download = 'test.mp3';
        link.click();
        window.URL.revokeObjectURL(downloadURL);
    });
}

验证要点 #

• 确认C#端直接保存字节数组生成的MP3可正常播放（你已经验证过，这说明原始字节数组没问题）。
• 检查Angular接收的data.content是否为Base64字符串（可以在控制台打印typeof data.content确认）。

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