前端post导出文件

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

项目中大部分的导出都是通过window.location.href进行实现的 类似于get请求，在接口地址后面拼接参数.但是也会有post请求，这就用到了前面我们所讲到的下载excel和pdf时用到的Blob对象。

window.location.href = `接口地址?startDate=${params.startDate}&endDate=${params.endDate}`

接口地址是这样的 /export/getExcel 跨域原因，因此接口地址需要代理一下

vue.config.js

proxy:{
    ‘/export’:{
        target:'服务地址',
	changeOrigin:true
    }
}

export.vue

<button @click="exportData">导出文件</button>
methods:{
    exportData(){
    // 入参，参数根据实际情况来决定，我这里就简单传一个开始日期以及结束日期
	let params = {
                startDate:'',
		endData:''
	}
        // 注意这里是底层是axios，若是fetch就不是这样写了。
	axios('/export/getExcel',{
		method:'POST',//请求方式post请求
		data:params,// 请求参数
		responseType:'blob'//类型为Blob类型
	}).then((response)=>{
		//文件名 若报错，请打印一下response 看下headers的内容。这里截取了一下文件的名字，当然文件名字也可以自定义
            const filename = response.headers['content-dispoaition'].split(';')[1].split('=')[1]
            // 声明blob对象
            const blob = new Blob([response.data])
            // 创建一个a标签
            const link = document.createElement('a')
            link.download = filename
            link.style.display = 'none'
            // 给a 标签加超链接i
            link.href = URL.createObjURL(blob)
            // 将a标签添加到body里
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            // 释放url 将a标签移除
            document.body.removeChild(link)
	})
    }
}

当时一味的用之前的方法，首先想到的get请求方式，没能下载成功，后端说参数应该是body类型，就换了post请求，由于是第一次写，经过不断的试验，以及朋友的帮助，才得以完成这个功能，记录一下代码，以便下次遇到相同的问题，就来掘金上面翻一下记录，感谢大家观看。此方法应该不兼容IE浏览器，兼容IE浏览器的代码在前面下载pdf和excel的文章里。