springboot+vue2 导出word文档浏览器直接调用不乱码 vue2接口解析后乱码

在Spring Boot项目中，配合Vue.js进行前端开发时，如果需要通过浏览器直接调用API生成Word文档并下载，可能会遇到字符编码问题，特别是在跨域或者内容包含非ASCII字符时容易出现乱码。要解决这个问题，可以采取以下步骤：

1. **统一编码**:
- 在服务器端Spring Boot应用中，设置返回的HTTP头`Content-Type`为`application/vnd.openxmlformats-officedocument.wordprocessingml.document`，同时指定`charset=UTF-8`。这样可以让客户端明确知道接收的数据编码。

@GetMapping("/export")
public ResponseEntity<InputStreamResource> exportDocument() throws IOException {
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    headers.set("Content-Disposition", "attachment; filename=document.docx");
    headers.setCharacterEncoding("UTF-8");

    // ... 实现生成Word文档的逻辑

    InputStream is = generateWordDocumentStream();
    return ResponseEntity.ok()
            .headers(headers)
            .body(new InputStreamResource(is));
}

2. **前端处理**:
- 在Vue.js的axios请求中配置请求头`Accept`为`application/octet-stream`，并且设置响应拦截器来处理接收到的内容流。在处理字节流时，先将其转换为字符串，然后编码成Base64或Blob对象，最后通过`download`属性让浏览器下载。

axios.defaults.headers.common['Accept'] = 'application/octet-stream';

axios.interceptors.response.use(response => {
    const content = response.data;
    if (response.headers['content-disposition']) {
        let url = window.URL.createObjectURL(new Blob([content], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }));
        const link = document.createElement('a');
        link.href = url;
        link.download = response.headers['content-disposition'].match(/filename="([^"]+)"/)[1];
        link.click();
        window.URL.revokeObjectURL(url);
    }
    return response;
}, error => {
    // 错误处理...
});