Vue+ajax实现文件下载【这里的ajax->axios】

我不是女神ヾ 2022-02-04 01:47 414阅读 0赞

文章转自：[https://www.cnblogs.com/yulj/p/8494465.html][https_www.cnblogs.com_yulj_p_8494465.html]

> **ajax不可以下载文件的原因**  
> ajax的返回值类型是json,text,html,xml类型，或者可以说ajax的接收类型只能是string字符串，不是流类型，所以无法实现文件下载。但用ajax仍然可以获得文件的内容，该文件将被保留在内存中，无法将文件保存到磁盘。这是因为JavaScript无法和磁盘进行交互，否则这会是一个严重的安全问题，js无法调用到浏览器的下载处理机制和程序，会被浏览器阻塞。

#### 方法一 ####

**如果你只是单纯的下载文件，并且没有什么要求，只要最简单的实现就好了。可以试试下面的方法**

window.location.href = url;   // url就是下载请求地址

#### 方法二 ####

**如果你想携带一些特殊的参数（比如请求头，token之类的），或者说就是想用axios来实现下载请看下面。**  
*当然如果你只是简单的参数上面也是可以实现的*

download(){ // 下载表格            
            let url = this.$store.state.frontUrl + "/personal/download"            
            this.$ajax.get(url,{                
            	headers:{ "X-Access-Token" : this.$store.state.token, },                
            	responseType: 'blob',            
            	},            
            ).then((response=>{                
            	const url = window.URL.createObjectURL(new Blob([response.data]));                
            	const link = document.createElement('a');                
            	link.href = url;                
            	link.setAttribute('download', 'file.docx');                
            	document.body.appendChild(link);                
            	link.click();            
            	})
            )
    }

[https_www.cnblogs.com_yulj_p_8494465.html]: https://www.cnblogs.com/yulj/p/8494465.html