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文件下载方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了element-plus 下拉框实现全选的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了Vue中computed和watch有哪些区别，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
本文主要介绍了Vue实现插槽下渲染dom字符串的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
Vue路由跳转方式区别汇总（push，replace，go）
vue项目中点击router-link标签链接都属于声明式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()。这篇文章主要介绍了Vue路由跳转方式区别汇总（push，replace，go）2022-12-12
这篇文章主要介绍了vue3.0中的keep-alive使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue报错"vue-cli-service‘不是内部或外部命令,也不是...”的解决办法
这篇文章主要介绍了vue报错"vue-cli-service‘不是内部或外部命令，也不是...”的解决办法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了关于vite proxy跨域问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
props 和 slot 在 Vue 中的作用略有不同，props 更多地用于父子组件之间的数据传递，而 slot 则更多地用于组件的复用和扩展。感兴趣的同学可以参考阅读2023-04-04
elementplus 中 DatePicker 日期选择器样式修改无效的问题及解决方案
这篇文章主要介绍了elementplus中DatePicker日期选择器样式修改无效的问题,DatePicker日期选择器弹出面板默认挂载在body上,所以在组件中添加了 scoped 属性的 style 标签下是修改不到其样式的,讲解了datepicker的使用方法,及常见的配置项和对应的值,需要的朋友可以参考下2024-01-01
Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合,下面这篇文章主要给大家介绍了关于使用idea创建vue项目的相关资料,需要的朋友可以参考下2022-08-08
最新评论