vue导出excel---XLSX库

vue导出excel---XLSX库

---

基础使用

1、将需要转出的二维数组转为工作表对象

//data：二维数组
//XLSX.utils.aoa_to_sheet：xlsx库的转换方法
let ws = XLSX.utils.aoa_to_sheet(data);

2、设置工作表中单元格的列宽

      let wscols = [];
      for (let i = 0; i < 9; i++){ //添加9列的列宽
        wscols.push({ wch: 20 }) //wch 属性设置列宽为20
      }
      //ws['!cols']，用于设置工作表的列属性。
      //!cols：是工作表中用于存储列信息的属性键。
      ws['!cols'] = wscols; //设置列宽为20

3、创建空白工作簿

//XLSX.utils.book_new()：xlsx库生成Excel工作簿对象的方法
let wb = XLSX.utils.book_new();

4、将工作表添加到工作簿中，并指定工作表名称

//XLSX.utils.book_append_sheet()：xlsx库的方法，用于将工作表 ws 添加到工作簿 wb 中，并指定工作表的名称为“Sheet1”
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

5、将工作簿导出为excel文件

//XLSX.writeFile()：xlsx库将工作簿导出为excel文件的方法
XLSX.writeFile(wb, '巡检结果.xlsx'); //wb：工作簿；后面的为工作簿的名称

6、整体代码：

    //调用该方法即可导出excel
    exportExcel(){     
      let ws = XLSX.utils.aoa_to_sheet(data); //将data数组转换为工作表ws
      let wscols = [];
      for (let i = 0; i < 9; i++){ //创建一个包含9列的工作表列宽配置wscols，每列宽度设为20
        wscols.push({ wch: 20 })
      }
      ws['!cols'] = wscols; //将列宽配置应用到工作表ws
      let wb = XLSX.utils.book_new(); //创建一个新的工作簿wb
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); //将工作表ws添加到工作簿wb中，命名为“Sheet1”
      XLSX.writeFile(wb, '巡检结果.xlsx'); //将工作簿wb导出为名为“巡检结果.xlsx”的Excel文件
    },

---

进阶使用

    //调用该方法即可导出excel
    //async：用于声明一个异步函数
    async exportExcel(){
      //await：和async一起使用，用于等待该方法完全结束后在执行后面语句
      let tableDataAll = await this.getInspectListAll(); //通过其他方法获取到的需要导出的数据

      if (tableDataAll.length > 65535){ //导出数据不能超过65535条
        window.alert('导出数据超过65535条！请减少导出数据！')
        return
      }

      //concaat：合并数组
      //headers数组与transformData()返回数组合并
      //headers数组在前，这里用来当 表头
      this.dataWithHeaders = [this.headers].concat(this.transformData(tableDataAll)); //调用this.transformData(tableDataAll)

      //遍历this.dataWithHeaders的对象
      //Object.values(item)：从对象item中提取所有可枚举属性的值，并返回一个数组
      //slice(0, -1)：从数组中去除最后一个元素
      //const data = this.dataWithHeaders.map(item => Object.values(item).slice(0, -1));
      const data = this.dataWithHeaders.map(item => Object.values(item)); //得到data数组，这是需要导出的所有数据

      let ws = XLSX.utils.aoa_to_sheet(data); //将data数组转换为工作表ws
      let wscols = [];
      for (let i = 0; i < 9; i++){ //创建一个包含9列的工作表列宽配置wscols，每列宽度设为20
        wscols.push({ wch: 20 })
      }
      ws['!cols'] = wscols; //将列宽配置应用到工作表ws
      let wb = XLSX.utils.book_new(); //创建一个新的工作簿wb
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); //将工作表ws添加到工作簿wb中，命名为“Sheet1”
      XLSX.writeFile(wb, '巡检结果.xlsx'); //将工作簿wb导出为名为“巡检结果.xlsx”的Excel文件

    },
    //excel导出前操作
    //tableDataAll中的数据并不全部都导出，通过下面方法后，将需要的数据放在新的对象中
    transformData(tableDataAll){
      //使用箭头函数，item为传入参数，将item中的多个属性映射到新对象中
      //transformData为函数
      const transformData = (item) => ({
        sourceName: item.sourceName,
        sourceIp: item.sourceIp,
        sourceClass: item.sourceClass,
        sourceType: item.sourceType,
        monitorName: item.monitorName,
        limitValuePercent: item.limitValuePercent,
        monitorValue: item.monitorValue,
        monitorValues: item.monitorValues,
        isWarnType: item.isWarnType,
        monitorTime: item.monitorTime
      });
      //map方法：遍历 tableDataAll 数组中的每一个元素
      //并对每个元素调用 transformData 函数，最终返回一个新的数组，其中每个元素都是经过 transformData 函数处理后的新对象
      return tableDataAll.map(transformData);
    },