欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue结合axios实现的调用接口下载excel功能

程序员文章站 2022-07-04 16:22:09
...

https://www.npmjs.com/package/axios

此链接是关于axios请求体的数据格式设定详解

1.

export function downloadUrl(url,data){
	return request({
      	url: "sale/"+url, // 接口名字
      	method: 'get',
		  params:data,
		  responseType:"blob"//通过api应该知道这是什么吧
    })
}

2.调用接口成功后在response中操作

downloadUrl("url",data).then(response=>{
		      			const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
				     	const downloadElement = document.createElement('a')
				     	const href = window.URL.createObjectURL(blob)
				     	downloadElement.href = href
				     	downloadElement.download = 'excel.xlsx'
				     	document.body.appendChild(downloadElement)
				     	downloadElement.click()
			     		document.body.removeChild(downloadElement) // 下载完成移除元素
				     	window.URL.revokeObjectURL(href) // 释放掉blob对象
		      		}).catch(err=>{
		      			console.log(err);
		      		})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.别看了已经结束战斗了