下载excel模板并导入excel前端代码
  x8gkM11ZsapQ 2023年12月11日 27 0

1.点击按钮代码

<el-tooltip content="下载excel" placement="top">
  <el-button
    type="primary"
    :plain="true"
    icon="el-icon-download"
    circle
    :size="defaultFormItemSize"
    @click="onloadExcel"
  ></el-button>
</el-tooltip>
<el-tooltip content="导入excel" placement="top">
  <el-button
    type="primary"
    :plain="true"
    icon="el-icon-upload2"
    circle
    :size="defaultFormItemSize"
    @click.stop="isModalOpen = true"
  ></el-button>
</el-tooltip>

2.导入弹框代码

<el-dialog
  title="导入"
  :visible.sync="isModalOpen"
  width="30%">
  <el-upload class="upload-demo" name="file" :headers="getUploadHeaders"
             ref="upload"
             @change="$forceUpdate()"
             :action="UploadUrl()"
             :file-list="fileList"
             :show-file-list="false"
             accept=".xlsx"
             :limit="1"
             :before-upload="beforeUpload"
             :on-success="onFileUploadSuccess">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
  <span slot="footer" class="dialog-footer">
    <el-button :size="defaultFormItemSize" @click="isModalOpen = false">取 消</el-button>
  </span>
</el-dialog>

3.方法代码

UploadUrl () {
  return this.getUploadActionUrl(Controller.uploadExcel());
},

beforeUpload (file) {
  this.loadingInstance = Loading.service(
    {
      target: '.upload-demo',
      text: '附件上传中...'
    }
  );
},

onFileUploadSuccess (response, file, fileList) {
  this.loadingInstance.close()
  if (response.success === true) {
    this.$message.success('导入成功!');
    this.fileList = undefined
    this.$refs.upload.clearFiles();
    this.isModalOpen = false
    this.refreshTableList();
  } else {
    this.fileList = undefined
    this.$refs.upload.clearFiles();
    this.$message.error(response.errorMessage)
  }
},

handleNodeClick (e) {
  this.contractorId = e.id;
  this.refreshTableList();
},

onloadExcel () {
  Controller.downloadExcel(this, '', '文件名.xlsx').then(res => {
  })
},

4.js接口代码

static downloadExcel (sender, params, fileName) {
  return sender.download('/downloadExcel', params, fileName);
} 
static uploadExcel () {
  return '/uploadExcel';
}
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月11日 0

暂无评论

推荐阅读
x8gkM11ZsapQ