1,直接通过a标签的href属性完成下载功能
<a :href="'/api/data/Export?token='+token"></a>
2,通过window.open()实现下载
window.open("/api/data/Export?token="+this.token)
前两种方法需要和后端约定好,将token以参数的形式传递过去,无法放在header里面。
3,下面这种方法可以通过axios请求文件信息,通过fileDownload实现下载
npm安装依赖
npm install js-file-download
在页面中导入
import fileDownload from "js-file-download";
获取文件,导出(该方法需要设置responseType: "arraybuffer")
//引入接口文档中的exportFile请求
import exportFile from @/config/api;
downloadFile(e) {
exportFile.then((res) => {
let fileName = res.headers["content-disposition"].split(";")[1].split("=")[1]
//fileDownload(文件,文件名) 这里在响应请求头中获取到文件名称 如果无法获取到 res.headers响应头,封装好的请求只把返回参数return给了成功回调,需要在封装请求这个地方做一下处理
fileDownload(res.data, fileName);
});
},
// 接口封装 api.js
export function exportFile(url,parameter) => {
return request({
url: "请求路径",
method: "get",
responseType: "arraybuffer",//重点
params: "传递参数",
})
}