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

最新推荐文章于 2024-04-24 16:53:04 发布

转载最新推荐文章于 2024-04-24 16:53:04 发布 · 3.5k 阅读

文章标签：

#ajax #axios #vue #文件下载

Vue 同时被 2 个专栏收录

33 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

文章指出ajax不能下载文件，因其返回值类型为json、text等字符串类型，非流类型，且JavaScript无法与磁盘交互。同时介绍了两种文件下载方法，一是单纯下载文件的简单实现，二是用axios携带特殊参数实现下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章转自：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();            
        	})
        )
}