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       });     });