菜鸟最近做了一个需求，就是需要上传表单并识别，然后识别出来的内容要可以修改，然后想的就是识别内容变成 form 表单，所以并没有使用 SpreadJS ，这个 SpreadJS 有很多 excel 的功能，强大是强大，就是搜出来的全是葡萄城的文档不清不楚（沙比一样）、再或者就是英文文档（看不懂），而且我需求也不是很复杂！

这里上传识别交给后端处理了，菜鸟做的就是查看详情的是时候可把表单展示的数据导出成 excel 文件就行！

安装插件

npm i xlsx
npm install -S file-saver

封装组件 – Export2Excel.js（多表）

此处参考：vue3中将数据导出为excel表格

菜鸟的需求是要一个 excel 包含多个表，所以菜鸟对其进行了优化：

/**
 *
 * @param {Object} workbook 工作薄
 * @param {Object} worksheet 工作表
 * @param {Object} cell 单元格
 * 标记，引用单元格时所使用的地址格式（如：A1、C7）
 */
 
import { saveAs } from "file-saver";
import * as XLSX from "xlsx";

function datenum(v, date1904) {
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheetFromArrayOfArrays(data) {
  var ws = {};
  var range = {
    s: {
      c: 10000000,
      r: 10000000,
    },
    e: {
      c: 0,
      r: 0,
    },
  };
  for (var R = 0; R !== data.length; ++R) {
    for (var C = 0; C !== data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      var cell = {
        v: data[R][C], // v表示单元格原始值， t表示内容类型，s-string类型，n-number类型，b-boolean类型，d-date类型，等等
      };
      if (cell.v == null) continue;
      /**
       * 通过地址对象 { r: R, c: C } 来获取单元格，R 和 C 分别代表从 0 开始的行和列的索引。
       * XLSX.utils 中的 encode_cell/decode_cell 方法可以转换单元格地址
       *    XLSX.utils.encode_cell({ r: 7, c: 2 })  ===》 C7
       */
      var cellRef = XLSX.utils.encode_cell({ c: C, r: R });

      if (typeof cell.v === "number") cell.t = "n";
      else if (typeof cell.v === "boolean") cell.t = "b";
      else if (cell.v instanceof Date) {
        cell.t = "n";
        cell.z = XLSX.SSF._table[14];
        cell.v = datenum(cell.v);
      } else cell.t = "s";

      ws[cellRef] = cell;
    }
  }
  // ws['!ref']：表示所有单元格的范围，例如从A1到F8则记录为A1:F8
  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
  return ws;
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {};
}

// 字符串转为ArrayBuffer
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;
}

/**
 *
 * @param {Array} multiHeader  多行表头,三维数组,因为每一行都是一个数组
 * @param {Array} header  表头
 * @param {Array} data  数据
 * @param {String} filename  文件名
 * @param {Array} merges  合并单元格
 * @param {Boolean} autoWidth  是否设置单元格宽度
 * @param {String} bookType  要生成的文件类型
 */
export function exportJsonToExcel({
  multiHeader = [],
  header,
  data,
  filename,
  sheetname,
  merges = [],
  autoWidth = true,
  bookType = "xlsx",
} = {}) {
  filename = filename || "excel-list";

  for (let i in header) {
    data[i] = [...data[i]];
    data[i].unshift(header[i]);
  }
  
  // eg:multiHeader: [[["光缆熔接纤序表"], ["2313123"]],[["!23131"], ["312313"]],[...]],
  for (let j in data) {
    if (multiHeader[j]) {
      for (let i = multiHeader[j].length - 1; i > -1; i--) {
        data[j].unshift(multiHeader[j][i]);
      }
    }
  }

  var wb = new Workbook();

  let ws = [];
  for (let i in data) {
    ws.push(sheetFromArrayOfArrays(data[i]));
  }
  
  // ws[!merges]：存放一些单元格合并信息，是一个二维数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列，eg：[["A1:C1","A2:C2"],[...]]，表示合并A1到C1且只对第一个表有用
  if (merges.length > 0) {
    for (let i in ws) {
      if (!ws[i]["!merges"]) {
        ws[i]["!merges"] = [];
      }
      if (merges[i]) {
        merges[i].forEach((item) => {
          ws[i]["!merges"].push(XLSX.utils.decode_range(item));
        });
      }
    }
  }

  if (autoWidth) {
    /* 设置worksheet每列的最大宽度 */
    const colWidth = data.map((row) =>
      row.map((val) => {
        /* 先判断是否为null/undefined */
        if (val == null) {
          return { wch: 10 };
        } else if (val.toString().charCodeAt(0) > 255) {
          /* 再判断是否为中文 */
          return {
            wch: val.toString().length * 2,
          };
        } else {
          return {
            wch: val.toString().length,
          };
        }
      })
    );
    /* 以第一行为初始值 */
    let result = colWidth[0];
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j] && result[j]["wch"] < colWidth[i][j]["wch"]) {
          result[j]["wch"] = colWidth[i][j]["wch"];
        }
      }
    }
    // ws['!cols']设置单元格宽度, [{'wch': 10},{'wch': 10}] ===> 第一列和第二列设置了宽度
    for (let i in ws) {
      ws[i]["!cols"] = result;
    }
  }

  /* add worksheet to workbook */
  for (let i in sheetname) {
    wb.SheetNames.push(sheetname[i]);
    wb.Sheets[sheetname[i]] = ws[i];
  }

  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    type: "binary",
  });
  // 这里的type很多都是type: "application/octet-stream"，但是菜鸟发现手机上会有问题，建议变成菜鸟的这个
  saveAs(new Blob([s2ab(wbout)], { type: "application/vnd.ms-excel" }), `${filename}.${bookType}`);
}

导出使用 – 数据处理成二维数组

这里是菜鸟封装的，如果有误，可以留言，菜鸟进行更改！

// 数据处理  --》 读者按照自己的逻辑来
for (const key in envFactors.value) {
  let data1 = []; //设置一个二级列表，导出的表格每一行为一个二级列表
  for (let i in objkeyArr.value) {
    let keyname = objkeyArr.value[i];
    data1.push(envFactors.value[key][keyname]);
  }
  data2.value.push(data1); //把二级列表塞入一级列表
}
console.log(data2); // data2 必须是二维数组

for (const key in sampleGroups.value) {
  let data1 = [];
  data1.push(
    sampleGroups.value[key].sampleTestName,
    sampleGroups.value[key].sampleAnalysisName,
    sampleGroups.value[key].groupFirstWay,
    sampleGroups.value[key].groupSecWay,
    sampleGroups.value[key].groupThirdWay,
    sampleGroups.value[key].groupFourthWay,
    sampleGroups.value[key].groupFifthWay
  );
  data3.value.push(data1);
}
console.log(data3);
// 数据处理结束

// 导出成表格
function exportExcel() {
  exportJsonToExcel({
    header: [
      [
        "检测报告样品名称",
        "分析样品名称",
        "分组名称",
        "分组名称",
        "分组名称",
        "分组名称",
        "分组名称",
      ],
      objkeyArr.value,
    ], // 表名个数可以不等于数据每一行的列数
    filename: "详请表",
    data: [data3.value, data2.value],
    sheetname: ["样品分组表", "环境因子表"],
  });
}

更多

菜鸟这里只使用了 multiHeader、header、data、filename、sheetname、merges 等属性，其他属性可以看该篇文章，挺详细的：纯前端js(或者vue)导出excel实现：合并单元格、设置单元格样式、单元格内换行

导入 excel 配合 element plus

2023/12/18 菜鸟现在也要前端识别excel，并且需求是前端能显示，而且要可以修改，只能说菜鸟太菜了，实在不会，顶多就可以识别出来展示！

识别函数封装 – ImportExcel.js

import * as XLSX from "xlsx";
// 处理excel文件
export function readExcel(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (ev) => {
      try {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
          type: "binary",
        });
        console.log(workbook);
        let length = workbook.SheetNames.length;
        const wxname = [];
        const ws = [];
        for (let i = 0; i < length; i++) {
          wxname.push(workbook.SheetNames[i]);
          // 生成json表格内容，也可以直接把_json换成_html，直接生成htm展示
          ws.push(XLSX.utils.sheet_to_json(workbook.Sheets[wxname[i]], { header: 1 })); // 这种生成的是二维数组（更好处理）
          // ws.push(XLSX.utils.sheet_to_json(workbook.Sheets[wxname[i]])); // 这种生成的是对象数组
        }
        console.log(ws);
        resolve({ wxname, ws });
      } catch (e) {
        reject(e);
      }
    };
    reader.readAsBinaryString(file.raw);
  });
}

这里菜鸟是使用的 element plus 的 el-input 所以这个 file 是什么得跟读者说明一下，下列实现简单的编辑操作代码中 filedata 就是，而且第二次上传可以不用管。

至于原生 js+input，请参考：前端使用xlsx插件读取excel文件数据（保姆级教程）

实现简单的编辑操作，并且简单的表进行补齐

菜鸟昨天搞了一下午，也没找到可以实现编辑的插件，最后只能自己写，这里菜鸟的想法就是把识别出来的 json 数据自己用 input 元素双向绑定，实现编辑效果！

2024/1/11，对于简单的，没有合并行或者列的表格，菜鸟补充上补齐代码，对于更特殊的表格，就得读者自己对行或者列进行判断并自己处理了，菜鸟这边需求有很多表，发现每个表都要单独限制太麻烦，所以还是后端识别了！

<script setup>
import { useI18n } from "vue-i18n";
import { ref } from "vue";
import { readExcel } from "@/tools/excel/ImportExcel.js";
import { getmaxleninArr } from "@/tools/tools.js";

const { t } = useI18n();

// 获取el-upload元素，方便后面清空
const upload = ref();
// 提交使用
let fd = null;
// 记录文件
let filedata = ref(null);
// 上传事件
function onFun(file) {
  if (
    file.name.indexOf(".xls") > 0 ||
    file.name.indexOf(".xlsx") > 0 ||
    file.name.indexOf(".xlsm") > 0
  ) {
    fd = new FormData();
    fd.append("file", file.raw); //传文件
    filedata.value = file;
  } else {
    upload.value.clearFiles();
    // eslint-disable-next-line
    ElMessage({
      message: t("uploadTip"),
      type: "error",
    });
  }
}
// 删除文件事件
function removeFun() {
  upload.value.clearFiles();
}
// 提交第二个文件事件
const handleExceed = (files) => {
  // console.log(files);
  upload.value.clearFiles();
  const file = files[0];
  upload.value.handleStart(file);
};

let formdata = ref([]);
let formName = ref([]);
const submitUpload = async () => {
  const A = await readExcel(filedata.value);
  formdata.value = A.ws;
  formName.value = A.wxname;
  console.log(formdata.value);
  console.log(formName.value);
  // 内容补齐（只对说明行以外进行）
  for (let i of formdata.value) {
    const maxlen = getmaxleninArr(i);
    for (let j in i) {
      let completion = true;
      for (let k in i[j]) {
        if (i[j][k].length > 30) {
          completion = false;
        }
      }
      if (completion) {
        for (let s = i[j].length; s < maxlen; s++) {
          i[j].push("");
        }
      }
    }
  }
};

const addnewRow = (index) => {
  const maxlen = getmaxleninArr(formdata.value[index]);
  const len = formdata.value[index].length;
  formdata.value[index][len] = [];
  for (let i = 0; i < maxlen; i++) {
    formdata.value[index][len].push("");
  }
};

const addnewCol = (index) => {
  let canadd = true;
  for (let i in formdata.value[index]) {
    for (let j in formdata.value[index][i]) {
      if (formdata.value[index][i][j].length > 30) {
        canadd = false;
      } else {
        canadd = true;
      }
    }
    if (canadd) {
      formdata.value[index][i].push("");
    }
  }
};
</script>

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    action="#"
    :auto-upload="false"
    :limit="1"
    :on-change="onFun"
    :on-exceed="handleExceed"
    :on-remove="removeFun"
  >
    <template #trigger>
      <!-- 选择文件 -->
      <el-button type="primary">{{ t("selectFile") }}</el-button>
    </template>
    <!-- 上传 -->
    <el-button class="uploadtext" type="success" @click="submitUpload">
      {{ t("upload") }}
    </el-button>
    <!-- 提示 -->
    <template #tip>
      <div class="el-upload__tip text-red">* {{ t("uploadTip") }}</div>
    </template>
  </el-upload>

  <div class="bigBox" v-for="(item, index) in formdata" :key="index">
    <p class="title">{{ formName[index] }}</p>
    <el-button @click="addnewRow(index)">新增一行</el-button>
    <el-button @click="addnewCol(index)">新增一列</el-button>
    <div class="linebox" v-for="(item2, index2) in item" :key="index2">
      <div class="item" v-for="(item3, index3) in item2" :key="index3">
        <p
          v-if="
            (formdata[index][index2][index3] && formdata[index][index2][index3].includes('规则')) ||
            (formdata[index][index2][index3] && formdata[index][index2][index3].includes('注意'))
          "
        >
          {{ item3 }}
        </p>
        <el-input v-else v-model="formdata[index][index2][index3]"></el-input>
      </div>
    </div>
  </div>
</template>

<style>
html,
body {
  overflow-y: auto !important;
}
</style>

<style lang="scss">
.bigBox {
  margin-bottom: 50px;
}
.title {
  font-size: 30px;
  border-bottom: solid #333 2px;
}
.linebox {
  display: flex;
  border-bottom: solid #333 2px;
  padding: 10px;
  .item {
    flex: 1;
  }
}
</style>

运行结果如下：

注意

这里的 getmaxleninArr 是获取一个二维数组中最长的一项，这里就不把代码贴出来了！

更多，table直接导出excel

这个可以直接使用现有的框架：vxe-table，自行封装的代码菜鸟也有个简单的，没使用过（感兴趣的读者可以尝试一下），这里展示一下，但是感觉不如直接用框架：

/* eslint-disable */
// 原来
// require("script-loader!file-saver");
// require("script-loader!xlsx/dist/xlsx.core.min");

// 菜鸟改
import { saveAs } from "file-saver";
import * as XLSX from "xlsx";

function generateArray(table) {
  var out = [];
  var rows = table.querySelectorAll("tr");
  var ranges = [];
  for (var R = 0; R < rows.length; ++R) {
    var outRow = [];
    var row = rows[R];
    var columns = row.querySelectorAll("td");
    for (var C = 0; C < columns.length; ++C) {
      var cell = columns[C];
      var colspan = cell.getAttribute("colspan");
      var rowspan = cell.getAttribute("rowspan");
      var cellValue = cell.innerText;
      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges
      ranges.forEach(function (range) {
        if (
          R >= range.s.r &&
          R <= range.e.r &&
          outRow.length >= range.s.c &&
          outRow.length <= range.e.c
        ) {
          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
        }
      });

      //Handle Row Span
      if (rowspan || colspan) {
        rowspan = rowspan || 1;
        colspan = colspan || 1;
        ranges.push({
          s: { r: R, c: outRow.length },
          e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 },
        });
      }
      //Handle Value
      outRow.push(cellValue !== "" ? cellValue : null);

      //Handle Colspan
      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
    }
    out.push(outRow);
  }
  return [out, ranges];
}

function datenum(v, date1904) {
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {};
  var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };
  for (var R = 0; R != data.length; ++R) {
    for (var C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      var cell = { v: data[R][C] };
      if (cell.v == null) continue;
      var cell_ref = XLSX.utils.encode_cell({ c: C, r: R });

      if (typeof cell.v === "number") cell.t = "n";
      else if (typeof cell.v === "boolean") cell.t = "b";
      else if (cell.v instanceof Date) {
        cell.t = "n";
        cell.z = XLSX.SSF._table[14];
        cell.v = datenum(cell.v);
      } else cell.t = "s";

      ws[cell_ref] = cell;
    }
  }
  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
  return ws;
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {};
}

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;
}

export function export_table_to_excel(id) {
  var theTable = document.getElementById(id);
  console.log("a");
  var oo = generateArray(theTable);
  var ranges = oo[1];

  /* original data */
  var data = oo[0];
  var ws_name = "SheetJS";
  console.log(data);

  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  /* add ranges to worksheet */
  // ws['!cols'] = ['apple', 'banan'];
  ws["!merges"] = ranges;

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: false, type: "binary" });

  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "test.xlsx");
}