vue get和post方式导出文件 兼容ie9

本文介绍了如何在Vue项目中使用get和post方式导出文件,并确保在IE9下兼容。通过封装axios的请求方法,设置responseType为'blob',实现文件下载功能。

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

将方法封装成公用的方法,自己放在自己的公用方法文件里,然后直接调用即可

// post 方法导出文件
const postExport = (data, name) => {
 	// data要导出的内容,name是文件名,固定可以自己在这里定义好
	const csvData = new Blob([data], { type: 'application/x-xlsx' })
	const file_name = name + '.xlsx'
	// ie浏览器
	if (window.navigator && window.navigator.msSaveOrOpenBlob) {
		window.navigator.msSaveOrOpenBlob(csvData, file_name)
	} else { // 非ie浏览器
		var a = document.createElement('a')
		var url = window.URL.createObjectURL(csvData)
		a.href = url
		a.download = file_name
		a.click()
		a.remove()
		window.URL.revokeObjectURL(url)
	}
}

export default {
	postExport
}

用的axios进行请求,也是封装成公用的方法
记得设置: responseType: ‘blob’

export function postExport(url, data) {
	return $http({
		url: url,
		method: 'post',
		datatype: 'application/json',
		responseType: 'blob',
		params: { ...data },
	})
}

调用:

// 用 postExport的请求方法,请求导出接口,带上要传的参数
let res = await this.$api.postExport('自己的导出的接口地址', '要传的参数') 
if (!res) return
// 接口返回数据之后 调用前面封装导出的方法即可
this.$util.postExport(res, '学校列表')

get方法导出:

window.location.href = '自己的导出接口地址'

get方法导出,带参数:

//  this.choseTableData  要传递的参数
window.location.href = '自己的导出接口地址' + '?ids=' + this.choseTableData
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值