开箱即用的VUE3+ant 导出组件

	<div>
            <a-button type="primary" @click="handleExportXls(props.fileName)">{{ props.title }}</a-button>
	</div>
</template>
<script setup name="PartyPaymentMange">
	import { reactive, ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { downFile } from '@/api/mange'

	const props = defineProps({
		url: {
			type: String,
			default: () => ''
		},
		params: {
			type: Object,
			default: () => {}
		},
		title: {
			type: String,
			default: () => '导出'
		},
		fileName: {
			type: String,
			default: () => '导出文件'
		}
	})

	const handleExportXls = (fileName) => {
		//导出
		if (!fileName || typeof fileName !== 'string') {
			fileName = '导出文件'
		}
		downFile(props.url, { ...props.params }).then((res) => {
			if (!res.data) {
				message.warning('文件下载失败')
				return
			}
			if (typeof window.navigator.msSaveBlob !== 'undefined') {
				window.navigator.msSaveBlob(new Blob([res.data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
			} else {
				let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/vnd.ms-excel' }))
				let link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				link.setAttribute('download', fileName + '.xls')
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link) // 下载完成移除元素
				window.URL.revokeObjectURL(url) // 释放掉blob对象
			}
		})
	}
</script>

<style lang="less" scoped></style>