VUE中导入导出excel

一、需要安装三个依赖：

https://blog.csdn.net/qq_41062586/article/details/80570136

二、下载

downuser为VUE获取到的数组数据

//下载
require.ensure([], () => {
              require('@/libs/jquery');
              const { export_json_to_excel } = require('@/libs/Export2Excel');
              const tHeader = ['成员', '分组', '角色'];
              const filterVal = ['user_name', 'group_name', 'role_name'];
              const list = self.downuser;
              const data = self.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, 'user');                  
 })



    formatJson(filterVal, jsonData){
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

三、上传

<div class="tips-import">
      <el-dialog title="导入人员" :visible.sync="importVisible" width="700px" :before-close="handleClose">
        <div class="content">
          <div class="import-intro">
            <span class="mgr20">导入说明：文件必须xls或xlsx格式</span>
            <el-button><a href="../../src/static/1.xlsx" download="1.xlsx">下载文件模版</a></el-button>
          </div>
          <div class="import-container">
            <el-upload ref="upload" class=""
                       :drag="true" :multiple="false" action=""
                       :auto-upload="false" accept=".xlsx"
                       :on-change="importfxx" :on-remove="resetImport">
              <img src="@/assets/wjmb.png" alt="" style="padding-top: 50px;">
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="importVisible = false">取 消</el-button>
          <el-button type="primary" @click="importSubmit">确 定</el-button>
        </span>
      </el-dialog>
</div>

.tips-import {
  text-align: left;
  .el-dialog_wrapper{display: block;}
}
.content-box .content {
  background: #fff;
  .import-intro {
    background: #fff5ea;
    text-align: center;
    padding: 10px;
    margin-bottom: 30px;
    .mgr20 {
      margin-right: 20px;
    }
  }
  .import-container {
    border: 1px solid #dbdbdb;
    text-align: center;
    padding: 50px 0;
    .mgbt30 {
      margin: 20px 0;
    }
  }
  .import-bottom {
    border: 1px solid #dbdbdb;
    border-top: none;
    padding: 20px 10px;
    background: #f5f5f5;
    .select-container {
      display: inline-block;
      width: 300px;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      border: 1px solid #dbdbdb;
      box-sizing: border-box;
      background: #fff;
      position: relative;
      img {
        margin-right: 10px;
      }
      .select-item {
        position: absolute;
        background: #fff;
        width: 100%;
        left: 0;
        box-sizing: border-box;
        li {
          padding-left: 10px;
          &:hover {
            background: #dbdbdb;
          }
        }
      }
    }
    .change-dept {
      float: right;
      margin-right: 20px;
      font-size: 16px;
      line-height: 40px;
      color: #409eff;
      cursor: pointer;
    }
  }
}

    //批量上传
    importU(){
      this.userData=[];
      if(document.getElementsByClassName("el-upload").length) {
              document.getElementsByClassName("el-upload")[0].style.display = "inline-block";
              this.$refs.upload.clearFiles();
      }
      this.importVisible = true;
    },
    importfxx(file, fileList) {
          document.getElementsByClassName("el-upload")[0].style.display="none";
          // 通过DOM取文件数据;
          let rABS = false; //是否将文件读取为二进制字符串
          let f = file.raw;
          let reader = new FileReader();
          let vm=this;
          FileReader.prototype.readAsBinaryString = function(f) {
              let binary = "";
              let rABS = false; //是否将文件读取为二进制字符串
              let wb; //读取完成的数据
              let reader = new FileReader();
              reader.onload = function(e) {
                  let bytes = new Uint8Array(reader.result);
                  let length = bytes.byteLength;
                  for(let i = 0; i < length; i++) {
                      binary += String.fromCharCode(bytes[i]);
                  }
                  let XLSX = require('xlsx');
                  if(rABS) {
                      wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                          type: 'base64'
                      });
                  } else {
                      wb = XLSX.read(binary, {
                          type: 'binary'
                      });
                  }
                  vm.userData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
              }
              reader.readAsArrayBuffer(f);
          }
          if(rABS) {
              reader.readAsArrayBuffer(f);
          } else {
              reader.readAsBinaryString(f);
          }
      },
    resetImport(file, fileList){
      document.getElementsByClassName("el-upload")[0].style.display="inline-block";
    },
    importSubmit(){
          let vm = this;
          if(!vm.userData.length){
              vm.$message.error({message:'请上传文件'});
              return false;
          }
          let pdata = {'导入要传的值'};
          util.ajax.post('路径',pdata).then(function (response) {
              let res = response.data;
              if (res.code == 200) {
                  vm.importVisible=false;
                  vm.$notify.error(d.message);
                  location.reload();
              } else {
                  console.log(response);
              }
          });
      },

 

未验证的：

GetPklExcelInfo().then(response => {
    // GetPklExcelInfo 发请求的方法
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      let blob = new Blob([response.data])
      window.navigator.msSaveOrOpenBlob(blob, '数据导出.xls')
    } else {
      /* 火狐谷歌的文件下载方式 */
      var blob = new Blob([response.data])
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob)
      downloadElement.href = href
      downloadElement.download = '数据导出.xls'
      document.body.appendChild(downloadElement)
      downloadElement.click()
      document.body.removeChild(downloadElement)
      window.URL.revokeObjectURL(href)
    }
  })
},