前端如何下载后端传输的文件

前端下载后端传回的文件有三种方式

1. 直接打开下载地址：这种无法命名，只适用于get直接返回blob的接口
2. 利用a标签的download：这种是比较适合的方案
3. 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")})