前端实现表格的导入导出功能

最近项目中使用了导入导出的功能，在这里记录一下

• 项目框架vue
• ui框架 antd
  

导出

    _exportFile(all) {
      var ids = all === true ? { judgeInfoList: [] } : { judgeInfoList: this.row }
      this.allLoading = true
      const obj = Object.assign({}, this.form)
      console.log(ids, obj)
      this.exportBtn = true
      this.exportAllBtn = true
      exportFile(Object.assign(obj, ids))
        .then(res => {
          console.log(res)
          if (res.isError) {
            this.$message.error(res.error.message)
            return
          }
          const blob = new Blob([res.data])
          const a = document.createElement('a')
          const url = window.URL.createObjectURL(blob)
          a.href = url
          console.log(res.headers)
          a.download = decodeURI(res.headers['content-disposition'].split('=')[1])
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        })
        .catch(err => {
          console.log('err', err)
          // this.$message.error('接口请求异常')
        })
        .finally(() => {
          this.exportBtn = false
          this.exportAllBtn = false
          this.allLoading = false
        })
    },

导出时先判断一下是全部导出还是导出多个，转换成blob格式后创建一个下载链接的a标签手动点击一下，再删除a标签就完成了导出的功能

导入

      importFile({
        'files': [
          {
            'attachUrl': this.checkAccountParams.attachUrl,
            'fileName': this.checkAccountParams.fileName,
            'type': 2
          },
          {
            'attachUrl': this.numberParams.attachUrl,
            'fileName': this.numberParams.fileName,
            'type': 1
          }
        ],
        'povertyType': this.obj.povertyType
      }).then((res) => {
        if (res.isError) {
          this.$message.error(res.error.message)
        } else {
          this.fileList = []
          this.numberFileList = []
          this.visible = false
          this.duplicate = false
          this.duplicateNumber = false
          this.$emit('changeList')
          this.$message.success('导入成功')
        }
      }).finally(() => {
        this.saveBtn = false
      })
      
	父组件
    // 导入完成修改在册户数列表
    changeList () {
      this._list(1)
      this.$emit('importBtn')
    },