vue3实现表格数据导出Excel

安装xlsx插件

npm install xlsx --save

在项目中引入

import * as XLSX from "xlsx";

方法1：

导出纯数据

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为自定义的文件名

 

方法2：

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

1.封装一个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');
    }

2.在需要导出的地方调用封装的exportExcel方法

const titleArr = ['id','名称','性别','年龄','职业']//表头中文名
exportExcel(tableData.value, 'test', titleArr, 'sheetName');