vue-element 调用接口导出和导入xlsx表格

一、axios 修改header

// 数据导入
export function import(data) {
	return request.post(`${baseUrl}/import`,
	data,{headers:{ 'Content-Type': 'multipart/form-data',"Type-Data":'xlsx'}})
}
// 数据导出
export function export(data) {
	return request({
		url:`${baseUrl}/export`,
		method: 'post',
		data:data,
		responseType: 'arraybuffer',
	})
}

二、导入与导出

1.导出

			handleDownload() { //导出
					let data = {};
					//导出数据id
					data.id = this.multipleSelection.toString();
					export(data).then(res => {
						var blob = new Blob([res])
						var downloadElement = document.createElement('a');
						var href = window.URL.createObjectURL(blob); //创建下载的链接
						downloadElement.href = href;
						downloadElement.download = '会员管理.xlsx'; //下载后文件名
						document.body.appendChild(downloadElement);
						downloadElement.click(); //点击下载
						document.body.removeChild(downloadElement); //下载完成移除元素
						window.URL.revokeObjectURL(href); //释放掉blob对象 
						
					}).catch(err => {
						console.log(err)
					})
			} 
			

2.导入

<el-upload class="upload-demo inline-block" action="" :http-request="httpRequest" :show-file-list="false"
				 :before-upload="beforeAvatarUpload" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
	<el-button style="margin:0 0 20px 20px" type="success" icon="el-icon-upload">导入文件</el-button>
</el-upload>

			//验证文件类型
			beforeAvatarUpload(file) {
				const isXls = file.type === "application/vnd.ms-excel" ? true : file.type ===
					"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ? true : false;
				if (!isXls) {
					this.$message.error("上传的文件只能是xls以及xlsx格式!");
				}
				return isXls;
			}
			// ---------------导入
			httpRequest(param) {
				let formData = new FormData();
				formData.append("xls", param.file);
				importVipAdmin(formData).then(res => {
					if (res.code == 200) {
						this.gitQueryVipAdmin()
						this.$message({
							message: res.msg,
							type: 'success'
						});
					}
				})
			},