vue中excel导入和导出

一、导入

<template>
    <div>
        <button type="primary" @click="selectFile">导入</button>
        <input 
          id="xlsFile" 
          type="file" 
          style="display: none"
          accept=".xls,.xlsx"
          ref="selectFileInput"
          @change="getFile"
        />
          
    </div>
</template> 
<script>
    export default {
        data() {
            return {
                
            }
        },
        methods:{
             // 选择需要导入的文件
          selectFile() {
            this.$refs.selectFileInput.click();
            },
         getFile(e) {
            var docObj = document.getElementById("xlsFile");
            if (docObj.files && docObj.files[0]) {
              let fd = new FormData(); //参数的格式是formData格式的
              fd.append("file", docObj.files[0]); //参数
              this.$api.xxx.importFile(fd).then((res) => {
                if (res.data.status == 200) {
                  this.$message.success({
                    message: "导入成功",
                    center: true,
                    showClose: true,
                    duration: 1000,
                  });
                } else {
                  this.$message.error({
                    message: "导入失败",
                    center: true,
                    showClose: true,
                    duration: 1000,
                  });
                }
              });
              this.$refs.selectFileInput.value = "";
            }
          },
        }
    }
</script>

二、导出

<template>
    <div>
         <iframe id="ifile" style="display: none"></iframe>
         <button
           type="primary"
           size="mini"
           style="margin-left: auto"
           @click="export"
         >导出</button>
       
    </div>
</template> 
<script>
    export default {
             getList() {
        
        let params={}
        this.$api.xxx.getData(params).then((res) => {
            if (res.data.status == 200) {
              this.exportList = JSON.parse(JSON.stringify(res.data.data));
              
            } else {
             
            }
      },

        data() {
            return {
                exportList：[]//导出列表
                 form：{}，
                 createTimeValue："",
                
            }
        },
        methods:{
                 //导出
      exportAll(){
        if (this.exportList.length == 0) {
          return this.$message.warning({
            message: "没有数据！",
            center: true,
            type: "warning",
            showClose: true,
            duration: 1000,
          });
        } 
       /*可选择时间
         else {
          if (this.createTimeValue) {
            if (this.createTimeValue[1] == this.createTimeValue[0]) {
              this.form.endTime = this.createTimeValue[1] + " 23:59:59";
              this.form.startTime = this.createTimeValue[0] + " 00:00:00";
            } else {
              this.form.endTime = this.createTimeValue[1] + " 23:59:59";
              this.form.startTime = this.createTimeValue[0] + " 00:00:00";
            }
          } else {
            this.form.endTime = "";
            this.form.startTime = "";
          }*/
          let json = { ...this.form};
          var time = new Date()
          axios({
            method: "post",
            url: base.baseURL + `file/export?startTime=${this.form.startTime}&endTime=${this.form.endTime}`,
            data: json,
            responseType: "arraybuffer", //要加responseType: 'arraybuffer'参数，不然下载的excel会乱码
          }).then((res) => {
            console.log(res)
              var blob = new Blob([res.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
              });
              var objectUrl = URL.createObjectURL(blob);
              var a = document.createElement("a");
              document.body.appendChild(a);
              a.style = "display: none";
              a.href = objectUrl;
              a.download = "下载文件01_"+time.toLocaleString().split('/').join('').split(':').join('').replace(/\s/g,"")+".xlsx";
              a.click();
              document.body.removeChild(a);
          })
            .catch((error) => {
              console.log(error);
              this.$message.warning({
                message: "error",
                center: true,
                type: "warning",
                showClose: true,
                duration: 1000,
              });
            });
        }
      },
        
        }
    }
</script>