vue element文件的导出 导入 下载

 一 导出

<i-button type="error" size="small" @click="exportList()">
          导出此列表
</i-button>

 

<Spin size="large" fix v-if="spinShowExport" style="min-height: 100%">
  <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
  <div>正在导出请稍后...</div>
</Spin>

 

      exportList () {
        let config = {
          responseType: "blob",
          withCredentials: false
        };
        this.spinShowExport = true
        listExport(this.activityId,config).then((res) => {
          let fileName = decodeURI(
            res.headers["content-disposition"].split("filename=")[1]
          );
          if (fileName == "noData") {
            this.$Message.info("没有要导出的数据！！");
          } else {
            let blob = res.data;
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = e => {
              let a = document.createElement("a");
              a.download = fileName;
              a.href = e.target.result;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
            };
          }
          this.spinShowExport = false
        }).catch((err) => {
          this.spinShowExport = false
          this.$Message.info("导出失败！！！");
          console.log(err)
        })
		
      },

二 导入

      goImport () {
        this.$router.push({
          name:'importFile',
          id: this.activityId
        })
      },

<template>
  <div class="lead">
    <commHead :topTitle="topTitle" />
    <div class="leadDiv">
      <div class="hint">
        <p>温馨提示:导入的文件必须为 TXT 或 XLSX</p>
        <!--<i-button type="error" @click="updown">下载文件模板</i-button>-->
      </div>
      <div class="hi_con">
        <Upload type="drag"
                :on-success='uploadCallback'
                :on-preview='preview'
                action="/event/import"
                name="importFile"
                :headers="{
                           Authorization: token
                        }"
                :data="{
                  id: activeityId
                }"
                :show-upload-list="false"
        >
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #ed3f14"></Icon>
            <p>将文件拖拽至此区域或点击上传</p>
          </div>
        </Upload>
      </div>
    </div>
  </div>
</template>

<script>
  import commHead from './public/header';
  export default {
    name: 'import-file',
    data() {
      return {
        topTitle: "文件导入",
        upList: '',
        token: window.sessionStorage['token'],
        activeityId: ''
      }
    },
    components: { commHead },
    methods: {
      uploadCallback(response, file, fileList) {
        if(response.code==0){
          this.$Message.info('导入成功')
          this.$router.back()
        } else {
          this.$Message.info('导入失败')
        }
      },
      preview(file) {
        console.log(file.response);
      }
    },
    mounted () {
      this.activeityId = this.$route.params.id
    }
  }
</script>
<style lang="scss" scoped>
  .nameTip{
    /*height: 25px;*/
    line-height: 20px;
  }
  #upload {
    background-color: #ed3f14;
    color: #fff;
    margin-top: 8px;
  }
  .lead {
    width: 100%;
    height: 400px;
    background: #fff;
    .leadDiv{
      margin-top:15px;
      padding-left:16px;
      /*text-align: center;*/
    }
    .hint {
      line-height: 56px;
      font-size: 12px;
      p {
        display: inline-block;
        color: #d73838;
      }
      button {
        width: 96px;
        height: 24px;
        margin-left: 18px;
        padding: 0;
      }
    }
    .hi_con {
      width: 344px;
      height: 120px;
      display: inline-block;
      .icon {
        margin-top: 16px;
        font-size: 32px;
        color: #888;
      }
      /*.ivu-upload {*/
      /*.ivu-upload-drag {*/
      /*background: #eee;*/
      /*}*/
      /*}*/
      .upd{
        width:342px;
        padding-top: 20px;
        display: flex;
        font-size:12px;
        justify-content: center;
        span{
          margin: 0 16px;
          padding: 2px 10px;
          background: #cc0000;
          border-radius: 4px;
          color: #f9dbdb;
          width: 120px;
        }
        a{
          color: #cc0000;
          // border-bottom: 1px solid #cc0000;
          text-decoration: underline;
          line-height: 25px;
        }
        p{
          line-height: 25px;
        }
      }
    }
  }
</style>

三 下载模板

<i-button type="error" size="small" class="mr" @click="downFile">
  <Icon type="ios-download-outline"></Icon>
  下载模板
</i-button>

  downFile () {
	var elemIF = document.createElement("iframe");
	elemIF.src = '../../../../static/活动报名导入用户模板.zip';
	elemIF.style.display = "none";
	document.body.appendChild(elemIF);
	setTimeout(function(){
	  document.body.removeChild(elemIF);
	},2000)
  },