excel批量导入导出

excel批量导入导出

导入流程

1.调用后端接口下载excel模板

数据以文件流的形式返回

// html
<div class="index-box-content-click" @click="download">下载模板</div>
// js
this.$api.downloadTemplate(this.id).then((res) => {
    // res为返回的文件流
    var content = res;
    // 添加a标签
    var elink = document.createElement('a');
    // 添加download属性，值为文件名
    elink.download = this.fileName + ".xlsx";
    elink.style.display = 'none';
    var blob = new Blob([content]);
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
})
// 最重要的是在做axios请求时，需要带上{responseType: 'blob'}，使返回的是一个流形式的文件

2、将excel文件导入

// html
<el-upload
           class="upload-demo"
           action="#"
           ref="upload"
           :http-request="httpRequest"
           :limit="1"
           :show-file-list="false"
           >
    <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
</el-upload>
// js
    // 自定义上传文件请求内容
    async httpRequest(fileData) {
      let file = fileData.file
      if(file.size / 1024 / 1024 > 10) {
        this.$message.error('文件大于10M，请重新选择！');
        return
      }
      let formData = new FormData()
      formData.append('file', file)
      formData.append('formId', this.id)
      formData.append('taskId', this.taskId)
      try {
        const res = await this.$api.importLedgerSetting(formData)
        if (res.code == "1") {
          this.$message({
            type: 'success',
            message: '批量导入成功！'
          })
          this.$emit('refreshPage')
        } else {
          this.$message.error(res.msg)
        }
        this.closeVisible()
        this.loading = false
      } catch (err) {
        this.loading = false
        this.childrenFn()
        this.$message.warning('服务器错误，请联系管理员')
      }
    }

导出

// html
<base-button
    prefixIcon="el-icon-setting"
    size="medium"
    type="default"
    @click="exportLedgerSetting"
>
批量导出
</base-button>
// js
    exportLedgerSetting() {
      this.$api.exportLedgerSetting({'projectId':this.ledgerId}).then(res => {
        var content = res;
        var elink = document.createElement('a');
        elink.download = this.title + ".xlsx";
        elink.style.display = 'none';
        var blob = new Blob([content]);
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      })
    }
    // 注意，axios请求时，需要带上{responseType: 'blob'}

\