Vue下载后台api服务器文件
程序员文章站
2024-02-20 10:46:52
...
后台api接口
[HttpGet]
public HttpResponseMessage DownloadFile(string fileName)
{
//fileName = "123.txt";
//文件的服务器地址
string filePath = HttpContext.Current.Server.MapPath("~/kaoqinwj/"+fileName);//路径
FileStream stream = new FileStream(filePath, FileMode.Open);
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
response.Content = new StreamContent(stream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = HttpUtility.UrlEncode(fileName)
};
response.Headers.Add("Access-Control-Expose-Headers", "FileName");
response.Headers.Add("FileName", HttpUtility.UrlEncode(fileName));
return response;
}
我这是传了一个文件名称
前台vue: 不传参的话可以直接使用 a 标签
<el-button type="text" icon="el-icon-download" @click="Xiazai(scope.row.storeName,scope.row.statisticsDate)">
下载该文件</el-button>
<!-- <a href="http://localhost:58248/api/WenjianXZ">下载文件</a> -->
axios传参
axios.get('/WenjianXZ?fileName='+file)
.then(res => {
console.log(res)
window.location.href = res.config.url;//接收下载
})
.catch(err => {
console.error(err);
})
上一篇: Web API 笔记及总结
下一篇: 深入理解Java原生的序列化机制