antd of vue的excel表格导入导出

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

本文基于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.name
         if (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 = 1
                this.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)
         });
         }
      }

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

总结：

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