前端下载后端传回的文件有三种方式
- 直接打开下载地址:这种无法命名,只适用于get直接返回blob的接口
- 利用a标签的download:这种是比较适合的方案
- file-saver:这是现成的库,简单方便
几个重要概念
createObjectURL :把blob对象的内存地址,以url形式给出
msSaveBlob : IE不支持a标签下载,用的是msSaveBlob方案
a标签的download属性 : 表面该a标签的行为是下载,并说明文件名
//按blob请求接口 // 这边响应必须设置成blob类型 axios.get('http://localhost:8000/download',{responseType:'blob'}).then((res) => { console.log(res.data) if(window.navigator.msSaveBlob){ //说明是IE浏览器,需要做兼容 window.navigator.msSaveBlob(res.data,{type:'application/xxxxxx'},"test.ppt") } else { //说明是现代主流浏览器 //传入文件数据,生成一个 下载链接 let blobURL = URL.createObjectURL(res.data) //创建标签 let link = document.createElement('a') //设置href link.href = blobURL //设置a标签的行为是download,不然就跳转了,同时设置名字是"test.ppt" link.download = "test.ppt" //隐藏a标签,他只是下载,没必要出现 link.style.display = "none" //模拟点击 link.click() //最后,把这个URL进行销毁,免得他占内存 URL.revokeObjectURL() } })
//使用第三方库file-saver
//引入第三方库 import {saveAs} from "file-saver" axios.get('http://xxxxxxxxxxx',{responseType:'blob'}).then((res) => { saveAs(res.data,"fileSaveDownload.ppt") })
还没有评论,来说两句吧...