在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”