Vue+ajax实现文件下载【这里的ajax->axios】_vue中axios和ajax下载都是哪里下载

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

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

方法一

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

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

方法二

如果你想携带一些特殊的参数（比如请求头，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();            
        	})
        )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16