Vue3 使用XLSX，实现导出Excel功能

Vue3 使用XLSX，实现导出Excel功能

1. 安装依赖

npm install xlsx --save

2.项目中引入

import * as XLSX from "xlsx/xlsx.mjs";

3.封装一个公共方法

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();

  // 设置每列的默认宽度（以字符为单位）
  const columnWidths = titleArr.map((title) => ({ width: 60 }));

  // 将每列的默认宽度应用到工作表中
  ws["!cols"] = columnWidths;

  // 此处隐藏英文字段表头
  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");
}

4.调用上述方法

// 导出
function handleAdd() {
  const titleArr = ["项目名称", "项目背景", "备注"];
  exportExcel(
    workToTruckList.value,
    "测试" ,
    titleArr,
    "sheetName"
  );
}