使用JSXLSX完成对用户信息导入导出(vue+element+node+express)

第一步 npm i xlsx
第二步 在vue中引入xlsx
第三部 编码

导入excel
（博主在这里是通过点击button按钮触发input来达到上传的效果）
在这里我使用的是vue,如果没有使用vue,则直接绑定(this)即可

//html部分
<el-button type="primary" size="small" id="el-nav2" @click="importExcel()">导入excel</el-button>
      <input type="file" @change="importf($event)" id="input-upload" style="display: none" value=""/>


//导入excel
      importExcel(){
        console.log(this.data2[0].children[0]);
        //触发input上传事件
        document.querySelector('#input-upload').click();
      },
      importf(obj){

        let _this = this;
        let this_axios = this.axios;

            var wb;//读取完成的数据
            var rABS = false; //是否将文件读取为二进制字符串
            //vue中时间绑定this需要用$event,所以在这里需要用target取值
            if (!obj.target.files) {
              return false;
            }
            var f = obj.target.files[0];
            var reader = new FileReader();
            //文件读取完成时出发
            reader.onload = async function (e) {
              var data = e.target.result;
              wb = XLSX.read(data, {
                type: 'binary'
              });

              /*wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
               wb.Sheets[Sheet名]获取第一个Sheet的数据*/

              var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
              console.log(wb.Sheets[wb.SheetNames[0]]);
              /*document.getElementById("excelContent").innerHTML= JSON.stringify( excelJson );*/
              //将读取的数据存放在excelJson数组中传递给后台服务端
              await this_axios.get('http://localhost:3000/users/userImport?arr=' + JSON.stringify(excelJson)).then((data) => {
                console.log('11111', data);
              });
              //再将数组清空重新插入数据
              await this_axios.get('http://localhost:3000/userTable').then((data) => {
                _this.tableData = [];
                for (let i = 0; i < data.data.length; i++) {
                  _this.tableData.push(data.data[i]);
                }
              });
            };
            reader.readAsBinaryString(f);
            //因为change事件必须value不同才会触发,所以在这里将value重新设定
            document.querySelector('#input-upload').value = '';

      },

导出excel
（博主在这里使用了element的树状空间,通过选择名称的形式进行选择性导出);
如果不使用树状控件直接导出的，那么在downloadExl(arr)内数组的可直接写成
let arr = [
｛
name:“zzw”,
sex:“男”,
address:“山东菏泽”
｝,
｛
name:“zzw”,
sex:“男”,
address:“山东菏泽”
｝
]

//html部分,
<el-button type="success" size="small" id="el-nav3" @click="dialogExportExcel = true">导出excel</el-button>

//methods部分
      //导出excel
      exportExcel(){
        //清空数组并将树状控件中的名称加入新数组
        this.treeArr.splice(0,this.treeArr.length);
        for (let i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) {
          this.treeArr.push(this.$refs.tree.getCheckedNodes()[i].label);
        }

        let arr;
        arr = this.tableData;
        let arr2 = [];

        //将选择的选项名称放入新数组arr2中再转为字符串
        for(let j = 0; j < this.treeArr.length; j++){
            arr2.push(this.treeArr[j]+',');
        }
        let strArr2 = JSON.stringify(arr2);

          //循环新数组取得key
          for(let arr_0 in arr[0]){
            for (let i = 0; i < arr.length; i++) {
                //如果值==-1则证明该值第一次出现，即为未选中,则可以删除
              if(strArr2.indexOf(arr_0)==-1){
                  console.log(arr_0,'不存在!');
                delete arr[i][arr_0];
              }
            }
          }

          downloadExl(arr);
          var tmpDown; //导出的二进制对象
          function downloadExl(json, type) {
            //根据json数据，获取excel的第一行(例如:姓名、年龄、性别)存至map
            var tmpdata = json[0];
            json.unshift({});
            var keyMap = []; //获取keys
            for (var k in tmpdata) {
              keyMap.push(k);
              json[0][k] = k;
            }

            var tmpdata = [];
            console.log(tmpdata,',,,,____________________tmpdata  ');
            json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
              v: v[k],
              position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
            }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
              v: v.v
            });
            console.log(tmpdata,',,,,++++++++++++++++++++++++++tmpdata  ');
            //设置区域,比如表格从A1到D10
            var outputPos = Object.keys(tmpdata);

            var tmpWB = {
              SheetNames: ['mySheet'], //保存的表标题
              Sheets: {
                'mySheet': Object.assign({},
                  tmpdata, //内容
                  {
                    '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
                  })
              }
            };

            //创建二进制对象写入转换好的字节流
            tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
              {bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型
            ))], {
              type: ""
            });

            var href = URL.createObjectURL(tmpDown); //创建对象超链接
            document.getElementById("downloadA").href = href; //绑定a标签
            document.getElementById("downloadA").click(); //模拟点击实现下载
            setTimeout(function () { //延时释放
              URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL
            }, 100);
          }

          //字符串转字符流
          function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
          }

          //将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
          function getCharCol(n) {
            let temCol = '',
              s = '',
              m = 0;
            while (n > 0) {
              m = n % 26 + 1;
              s = String.fromCharCode(m + 64) + s;
              n = (n - m) / 26
            }
            return s
          }

      }