Vue中下载 execl 表格

Chestnut*

于 2020-09-28 16:36:36 发布

阅读量510

点赞数

分类专栏： vue 文章标签： vue js download

本文链接：https://blog.youkuaiyun.com/weixin_43830188/article/details/108852082

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

该博客介绍了如何在前端通过调用后端接口实现Excel文件的下载。前端发送POST请求，设置responseType为'blob'，接收文件流，然后利用Blob对象和创建的a标签完成下载操作。这一过程涉及到了HTTP请求、文件处理和DOM操作。

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

在项目下载 execl 表格的功能

实现逻辑：前端请求后端接口，后端返回 execl 文件流，前端对文件流进行下载操作；前端封装请求一定要设置responseType:‘blob’；

封装请求：

export function getDownloadTable(data){
	return {
		url:'请求接口',
		method:'POST'，
		responseType:'blob',
		params:data	
	}
}

组件中请求接口：

methods:{
	// 点击下载表格事件
	downloadTable(){
		getDownloadTable(参数).then(res=>{
			this.downloadFile(res,'文件名');
			console.log(res)
		})
	}
}

下载表格事件：

methods:{
	downloadFile(data,fileName){
		let blob = new Blob([data],{type:`application/vnd.ms-excel;charset=utf-8`});
		let downloadElement = document.createElement('a');
		let href = window.URL.createObjectURL(blob);
		downloadElement.href = href;
		downloadElement.download = fileName;
		document.body.appendChild(downloadElement);
		downloadElement.click();
		document.body.removeChild(downloadElement);
		windiw.URL.revokeObjectURL(href);
	}
}

简单实现原生 js 下载文件流功能