文件下载方式
1. window.location.href 方式
注意：
文件名称为中文时要使用 encodeURI 转码；
下载文件格式为 图片 或 txt 时文件会直接打开；
下文中${ url } 表示接口地址
根据文件名下载：
1 | window.location.href = `${url}/文件名.xlsx`; |
文件名有中文：
1 | window.location.href = `${url}/${encodeURI("文件名.xlsx")}`; |
根据接口及参数下载（文件名未知）：
1 | window.location.href = `${url}?flag=1&id=${id}`; |
当参数较多时：
1 2 3 4 5 6 7 | import Qs from 'qs'let params = { id:1, name:'张三'}let paramStr = Qs.stringify(params);window.location.href = `${url}?${paramStr}` |
2. 后台返回文件流，模拟a 链接下载
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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文件下载方法内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
