京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

Vue3文件下载方法实现的简单代码

2024-11-3 10:44| 发布者: 44f6fa4f5| 查看: 86| 评论: 0

摘要: 目次文件下载方式1. window.location.href 方式2. 背景返回文件流,模拟a 链接下载总结 文件下载方式 1. window.location.href 方式 [code]留意:文件名称为中文时要利用 encodeURI 转码;下载文件格式为 图片
目次

文件下载方式

1. window.location.href 方式

[code]留意:文件名称为中文时要利用 encodeURI 转码;下载文件格式为 图片 或 txt 时文件会直接打开;下文中${ url } 表示接口地址[/code]

根据文件名下载:

[code] window.location.href = `${url}/文件名.xlsx`; [/code]

文件名有中文:

[code] window.location.href = `${url}/${encodeURI("文件名.xlsx")}`; [/code]

根据接口及参数下载(文件名未知):

[code] window.location.href = `${url}?flag=1&id=${id}`; [/code]

当参数较多时:

[code] import Qs from 'qs' let params = { id:1, name:'张三' } let paramStr = Qs.stringify(params); window.location.href = `${url}?${paramStr}` [/code]

2. 背景返回文件流,模拟a 链接下载

[code] 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 }); });[/code]

总结 

到此这篇关于Vue3文件下载方法实现的文章就先容到这了,更多相关Vue3文件下载方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章盼望大家以后多多支持脚本之家!


来源:https://www.jb51.net/javascript/328935y6b.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
关闭

站长推荐上一条 /6 下一条

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-7-2 03:38 , Processed in 0.027529 second(s), 18 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

返回顶部