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文件下载方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
VUE3刷新页面报错问题解决:Uncaught SyntaxError:Unexpected token &apo
这篇文章主要介绍了VUE3刷新页面报错:Uncaught SyntaxError: Unexpected token ‘<‘,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
Vue2 this 能够直接获取到 data 和 methods 的原理分析
这篇文章主要介绍了Vue2 this能够直接获取到data和methods的原理分析,因为methods里的方法通过bind指定了this为new Vue的实例2022-06-06
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
本篇文章主要介绍了详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06


最新评论