在vue中使用http 请求后端接口下载，如何导出csv 文件，并以后端接口的名称作为文件命名

在vue中使用http 请求后端接口下载，如何导出csv 文件，并以后端接口的名称作为文件命名？

API文件中的接口

export function Example(params) {
	return request({
		url: `/api/Export/Example`,
		method: 'get',
		params,
		responseType: 'arraybuffer'
	})
}

vue 组件中调用

	let res = await Example(data);
					
					var filename = '前端命名.csv'
					try {
						const rawString = res.headers['content-disposition'];
						console.log("1")
						if (rawString) {
							// 使用正则表达式解析
							console.log("2")
							var match = rawString.match(/filename\*=UTF-8''(.+)/);
							// 获取文件名
							if (match) {
								filename = decodeURIComponent(match[1]);
								console.log("filename 3",filename)
			
							}
						}
					} catch (e) {
						//TODO handle the exception
						console.error(e)
					}
					
					

					const blob = new Blob([res.data], {
						type: 'text/csv;charset=utf-8'
					});

					saveAs(blob, filename);

为什么要获取 const rawString = res.headers[‘content-disposition’]；解释

Swagger 是一个用于设计、构建、文档化和消费 RESTful Web服务的开源工具。它通过生成API文档，并提供一个可交互的界面，允许开发者直接在浏览器中测试和调试API。

当你使用Swagger来测试API时，它会发送HTTP请求并返回响应。在这个过程中，Swagger能够拿到响应中的Headers，因为它能够直接访问到响应的内容。

而在Vue.js中，浏览器的同源策略（Same-Origin Policy）会限制跨域请求，即在JavaScript代码中直接访问其他域的响应头信息。这是为了保护用户的安全和隐私。因此，在Vue.js中，如果你使用`axios`或其他HTTP库发送请求，你只能访问到标准的响应头，如Content-Type、Content-Length等，而不能直接访问自定义的响应头。

但是，你仍然可以通过其他方式获得响应头信息。一种方法是在服务器端通过设置适当的CORS头来允许浏览器访问自定义的响应头。另一种方法是在Vue.js的HTTP请求中显式请求返回完整的响应，然后从响应对象中获取头信息。

以下是使用`axios`获取完整响应的示例代码：

```javascript
import axios from 'axios';

axios.get('/api/endpoint', { responseType: 'document' })
  .then(res => {
    const headers = res.headers;
    // 这里可以访问到完整的响应头信息
    console.log(headers);
  })
  .catch(err => {
    console.error(err);
  });


在上述代码中，我们使用`responseType: 'document'`配置项来告诉`axios`返回完整的响应，而不是仅返回响应的内容。这样，你就可以通过`res.headers`访问到完整的响应头信息。

需要注意的是，为了能够成功访问自定义的响应头，你需要在服务器端允许跨域请求，并在响应中设置相应的`Access-Control-Expose-Headers`头字段，把需要暴露给浏览器的自定义响应头添加到其中。

后端要做什么
为了能够成功访问自定义的响应头，你需要在服务器端允许跨域请求，并在响应中设置相应的Access-Control-Expose-Headers头字段，把需要暴露给浏览器的自定义响应头添加到其中。

response.AddHeader “content-disposition”,“attachment; filename=fname.ext”