Vue3文件下载方法实现的简单代码
更新时间:2024年10月17日 10:46:04 作者:BasicLab基础架构实验室
在Web开发中,文件下载可通过多种方式实现,下面这篇文章主要介绍了Vue3文件下载方法实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
文件下载方式
1. window.location.href 方式
注意:
文件名称为中文时要使用 encodeURI 转码;
下载文件格式为 图片 或 txt 时文件会直接打开;
下文中${ url } 表示接口地址
根据文件名下载:
window.location.href = `${url}/文件名.xlsx`;
文件名有中文:
window.location.href = `${url}/${encodeURI("文件名.xlsx")}`;
根据接口及参数下载(文件名未知):
window.location.href = `${url}?flag=1&id=${id}`;
当参数较多时:
import Qs from 'qs' let params = { id:1, name:'张三' } let paramStr = Qs.stringify(params); window.location.href = `${url}?${paramStr}`
2. 后台返回文件流,模拟a 链接下载
this.$axios.get(${url}/${fileName}`, { responseType: "blob", }).then((response) => { //new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层) const blob = new Blob([response.data]); const elink = document.createElement('a'); elink.download = '文件名.xlsx'; elink.style.display = 'none'; elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); // 释放URL 对象 document.body.removeChild(elink); }).catch((error) => { this.$message({ message: error }); });
总结
到此这篇关于Vue3文件下载方法实现的文章就介绍到这了,更多相关Vue3文件下载方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vuex中...mapstate和...mapgetters的区别及说明
这篇文章主要介绍了vuex中...mapstate和...mapgetters的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08使用vue-router与v-if实现tab切换遇到的问题及解决方法
这篇文章主要介绍了vue-router与v-if实现tab切换的思考,需要的朋友可以参考下2018-09-09
最新评论