需求:后台管理系统的某个表格需要导入导出

本文基于vue和antdesign

1. 表格导入：

首先需要先下载导入模版，如果导入的表格和项目中的表格不对应的话，将此传给后端之后，后端识别不出来。

下载导入模版就是直接向后端发送请求，请求时将数据转换为blob流(关键的一步)

上面的部分代码：

let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }));let a = document.createElement('a');a.style.display = 'none';a.href = url;a.setAttribute('download', ``);document.body.appendChild(a);a.click();url = window.URL.revokeObjectURL(url);document.body.removeChild(a)this.$message.success('下载成功', 3)

1.2、导入模版下载完成后，将此文件导入项目表格中

antd的组件库中有个a-upload上传组件，其中注意点是action，这个props的值应该为 action="请求的基准路径（axios.defaults.baseURL + 导入接口）"，如果是动态的，需要在action前面加上冒号。

html:
<a-upload name="file" :action="actionURL+''" @change="handleChange":showUploadList="false" method="post" :data="file.file" :headers="headers"><a>导入</a></a-upload>
js:handleChange(info) { // 导入this.file['file'] = info.file.nameif (info.file.status !== 'uploading') {//   console.log(info.file, info.fileList);}if (info.file.status === 'done') {this.$message.success('导入成功', 3)} else if (info.file.status === 'error') {this.$message.error('文件导入失败', 3);this.isImportExcel = false}},

1.3、文件导入还可以不使用组件，像平常一样调取接口即可（1.2和1.3任选）

  importExcel(info) {let input = document.createElement("input");input.type = "file";input.onchange = this.handleUpload;input.click();},handleUpload(event) {let file = event.target.files[0];POST_IMPORT_FILE(file).then((res) => {console.log(res)if (res.data.code === 0) {this.$message.success('导入成功', 3);this.pagination.current = 1this.getList();} else {this.$message.error('导入失败', 3);}});},//  axios请求封装
export const POST_IMPORT_FILE = (data) => {let formData=new FormData()formData.append('file',data);formData.append('type',0);return axios.post(`接口`, formData, {headers: {'Content-Type': 'multipart/form-data'}});
}

2、表格导出

html:<a-button type="primary" style="margin-left:20px"loading>导出</a-button>
js:async exportExcel() { // 导出axios({method: '',url: '/',params: {},responseType: "blob"}).then((res) => {let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }));let a = document.createElement('a');a.style.display = 'none';a.href = url;a.setAttribute('download', `维护.xlsx`);document.body.appendChild(a);a.click();url = window.URL.revokeObjectURL(url);document.body.removeChild(a)this.$message.success('导出成功', 3)}).catch(error => {this.$message.error('导出失败', 3)});}}

至此，导入导出结束，上述代码可以粘贴复制，请求内容自己更改一下即可。

总结：

分析需求，找到解决办法，逐步完善！如有不到，请提出，以免误导他人，感谢！