【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！
博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步!
吾等采石之人，应怀大教堂之心，愿大家奔赴在各自的热爱里…
一、业务场景
场景一：如果你的文件是静态的存储在自己的服务器上；
使用window.location.href可以实现下载功能
//获取或者赋值一个下载路径
let downUrl;
//采用如下的方式可以直接下载文件
window.location.href = downUrl;如上的路径对应服务器上文件存储的路径即可，在一定的场景下是不需要后台的
当然在开发过程遇到过问题也做过总结可参考：JavaScript前端判断文件是否存在
场景二：如果你的文件需要动态的生成，返回给你文件流，动态的生成excel文件等
比如你有一个人员管理系统，系统本身可以对人员信息进行修改，当然可以导出excel表格，此时这个文件就是一个动态的文件，要通过数据库的读取插入到当前的Excel文件中，返回值是一个文件流，返回给前端
困难-解决-反思-分享
二、代码分享
应用场景：后台是post请求，且返回的是文件流
当时查阅了很多资料，如下的代码亲测实现了访问后台下载文件
download() {
let url = downURL; //后端接口对应的访问地址
window.app.axios
.get(url, {
headers: {
'Content-Type': "application/x-download'",
token: sessionStorage.getItem('token')
},
responseType: 'blob'
})
.then(function(response) {
let blob = new Blob([response.data], {
type: 'application/vnd.ms-excel'
});
let filename = 'Testfile.xls';
if (window.navigator.msSaveOrOpenBlob) {
// 兼容IE10
window.navigator.msSaveBlob(blob, filename);
} else {
// 兼容chrome/firefox
let aTag = document.createElement('a');
aTag.download = 'Testfile.xls';
aTag.href = window.URL.createObjectURL(blob);
aTag.click();
URL.revokeObjectURL(aTag.href);
}
})
.catch(function() {
//如果不能正常下载给出对应提示
this.$message({
type: 'error',
message: '文件下载失败'
});
});
}后台的接口可以先使用postman测试
//downURL此出的url具体根据后端的地址拼接，此处只是给一个案例
window.location.protocol + '//' + window.location.hostname +
(window.location.port ? ':' + window.location.port : '') + '/' + 'file/download'此处headers为权限验证的token,如果没有可以不传
token: sessionStorage.getItem('token') blob：response 是一个包含二进制数据的 Blob 对象 。
responseType: 'blob' // 表明返回服务器返回的数据类型补充知识
//http://localhost:8888/#/
window.location.protocol
//"http:"
window.location.host
//"localhost:8888"
window.location.hostname
//"localhost"``三、拓展补充
开发过程也遇到了很多问题，相关问题总结请参考
缓存问题解决：Java代码读取文件缓存问题解决（案例详解）
File类参考：深入学习Java文件类File类（Demo详解）
上传组件基础学习可参考：Element-UI中el-upload上传组件（demo详解）
MultipartFile类参考：MultipartFile工具类（方法详解）
el-upload上传组件：accept属性限制文件类型
Springboot项目-案例详解：Java代码实现读取resource文件
文件上传下载等相关知识，还有很多值得学习和研究的地方，期待不断努力遇见一个更好的自己
---
非常感谢你阅读到这里，如果这篇文章对你有帮助，希望能留下你的点赞👍 关注❤️ 分享👥 留言💬thanks！！！
愿你们奔赴在自己的热爱里！
