【辰兮要努力】: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!!!
愿你们奔赴在自己的热爱里!