导出网页数据

实现表格数据导出Excel

1.安装依赖

先在VSoce里面安装xlsx依赖

npm install xlsx --save

2.在需要的项目页面中导入

import * as XLSX from "xlsx";

3.方法一(最简单的导出)

此方法是纯导出数据,没有其他的设置,对导出的Excel表格没有要求时可以使用这个方法

const data = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名
XLSX.writeFile(wb,'test.xlsx')//test.xlsx为自定义的文件名

注意:如果是在某事件被触发时才进行的导出操作时,需要写到该事件内才可以

导入的文件效果图(没有设置表头中文名,所以还是英文的字段,如果需要自定义设置中文名看第二种方法)

image.png

4.方法二(自定义表头中文名)

(此方法用于对表头有要求的,可以用来自定义设置表头中文名)

01:封装一个exportExcel方法

/*
    * @description:
    * @param {Object} json 服务端发过来的数据
    * @param {String} name 导出Excel文件名字
   
    * @param {String} titleArr 导出Excel表头
   
    * @param {String} sheetName 导出sheetName名字
    * @return:
    */
function exportExcel(json, name, titleArr, sheetName) {
      /* convert state to workbook */
      var data = new Array();
      var keyArray = new Array();
      const getLength = function (obj) {
        var count = 0;
        for (var i in obj) {
          if (obj.hasOwnProperty(i)) {
          count++;
          }
        }
      return count;
      };
      for (const key1 in json) {
      if (json.hasOwnProperty(key1)) {
        const element = json[key1];
        var rowDataArray = new Array();
        for (const key2 in element) {
        if (element.hasOwnProperty(key2)) {
          const element2 = element[key2];
          rowDataArray.push(element2);
          if (keyArray.length < getLength(element)) {
          keyArray.push(key2);
          }
        }
        }
        data.push(rowDataArray);
      }
      }
      // keyArray为英文字段表头
      data.splice(0, 0, keyArray, titleArr);
      console.log('data', data);
      const ws = XLSX.utils.aoa_to_sheet(data);
      const wb = XLSX.utils.book_new();
      // 此处隐藏英文字段表头
      var wsrows = [{ hidden: true }];
      ws['!rows'] = wsrows; // ws - worksheet
      XLSX.utils.book_append_sheet(wb, ws, sheetName);
      /* generate file and send to client */
      XLSX.writeFile(wb, name + '.xlsx');
}

02:在需要导出的地方调用封装的exportExcel方法

const titleArr = ['id','巡河次数','完成次数','巡河人员','时间']//表头中文名
exportExcel(tableData.value, 'test', titleArr, 'sheetName');

导出的效果图

image.png