Spring返回Base64格式byte[]，Angular中atob报错如何转换？

我来帮你搞定这个问题！你遇到的_co.atob is not a function错误，核心原因是Angular模板里不能直接调用全局的window.atob方法，再加上Spring默认会把byte[]序列成Base64字符串，这就导致了前端处理异常。下面给你两种可行的解决方案：

方案一：后端直接返回字符串，避免前端解码 #

既然你的payload本质是日志文本，不如在后端就把byte[]转换成字符串，这样前端拿到就能直接用，省掉解码步骤。

修改业务代码示例 #

假设你的Frame类里payload是byte[]类型，可以在返回给前端前转换成UTF-8字符串：

@GetMapping("docker/container/{containerName}/logs") 
public List<Frame> getContainerLogs(@PathVariable String containerName) { 
    Container container = dockerService.getContainer(containerName); 
    List<Frame> logs = dockerService.getDockerLogs(container);
    // 遍历日志，把byte[]转成UTF-8字符串
    for (Frame frame : logs) {
        frame.setPayload(new String(frame.getPayload(), StandardCharsets.UTF_8));
    }
    return logs; 
}

或者配置Jackson全局修改byte[]序列化规则 #

如果不想修改业务代码，可以配置Jackson让它把byte[]直接序列成字符串，而不是Base64：

@Configuration
public class JacksonConfig {
    @Bean
    public ObjectMapper objectMapper() {
        ObjectMapper objectMapper = new ObjectMapper();
        // 关闭byte[]转Base64的默认行为
        objectMapper.configure(MapperFeature.USE_BASE64_FOR_BYTES, false);
        return objectMapper;
    }
}

方案二：前端封装解码方法（不修改后端） #

如果暂时不想动后端，那就在Angular组件里封装一个调用atob的方法，因为模板无法直接访问全局window对象的方法。

组件TS代码修改 #

getLogs() { 
    this.dockerService.getLogs(this.name).subscribe(logs => { 
        this.logs = logs; 
        console.log(logs); 
    }); 
}

// 新增解码方法，封装window.atob
decodePayload(payload: string): string {
    return window.atob(payload);
}

HTML模板修改 #

把原来直接调用atob的地方改成调用组件里的方法：

<p *ngFor="let log of logs; let idx = index;">
    <span class="logsLine">{{idx}}: </span>
    <span>{{decodePayload(log.payload)}}</span>
</p>

这样就能正常解码Base64字符串，不会再出现atob is not a function的错误啦！

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