vue3 实现模板下载、批量导入

<template>
 <div class="bs-table-btns" style="margin-bottom: 10px">
  <el-button type="warning" icon="i-ep-upload">
<el-upload :show-file-list="false" :http-request="onClickUpload"> 批量导入 </el-upload>
	</el-button>
	<el-button type="primary" @click="exportTemplate" style="display: inline-block">下载模板</el-button>
	</div>
</template>
<script setup lang="ts">
// 批量导入
const onClickUpload = (options: UploadRequestOptions) => {
	materialImport(options.file).then((res) => {
		if (res.code === 0) {
			ElMessage.success('导入成功')
			requestList()
		} else {
			ElMessage.warning(res.msg)
		}
	})
}
// 下载模板
const exportTemplate = () => {
	materialDownloadTemplate().then((res) => {
		let data = new Blob([res.data], { type: 'application/vnd.ms-excel,charset=utf-8' })
		if (typeof window.chrome !== 'undefined') {
			// Chrome
			var link = document.createElement('a')
			link.href = window.URL.createObjectURL(data)
			link.download = '耗材模版.xls'
			link.click()
		} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
			// IE
			var blob = new Blob([data], { type: 'application/force-download' })
			window.navigator.msSaveBlob(blob, '耗材模版.xls')
		} else {
			// Firefox
			var file = new File([data], '耗材模版.xls', { type: 'application/force-download' })
			window.open(URL.createObjectURL(file))
		}
	})
}
</script>

js:

import request from '@/utils/request'
import { AxiosPromise } from 'axios'
import { ResType, ResPageType } from '@/api/types'

// 模版下载
export function materialDownloadTemplate(params: object): ResType<any> {
	return request({
		url: '/wms-admin/api/wms/baseMaterial/downloadTemplate',
		method: 'get',
		responseType: 'blob',
		params: {
			...params
		}
	})
}
// 批量导入
export function materialImport(file: File): ResType<object> {
	const formData = new FormData()
	formData.append('uploadExcel', file)
	return request({
		url: '/wms-admin/api/wms/baseMaterial/import ',
		method: 'post',
		data: formData,
		headers: {
			'Content-Type': 'multipart/form-data'
		}
	})
}