前端导出EXCEL-XLSX

已于 2024-12-03 16:26:27 修改
阅读量4.4k 收藏 73
点赞数 44
分类专栏： JS知识点 文章标签： excel
于 2024-05-14 22:41:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yujiabao702/article/details/138577054
版权

前提准备

下载 xlsx 包。

npm i xlsx

导入 xlsx。

import * as XLSX from "xlsx";

 打印XLSX可以在控制台看到它的属性和方法。

 后续很多操作都是通过 XLSX 中的属性和方法实现，其中 utils 用到的地方会多一些，下面会一点一点的介绍。

1.XLSX 导出 Excel 文件有以下几个步骤

  1. 创建一个工作簿（WorkBook）。

  2. 创建 sheet 对象（WorkBook.sheet）。

  3. 将 sheet 对象插入工作簿。

  4. 下载工作簿。

2.创建工作簿（WorkBook）

通过 XLSX.utils.book_new() 可以创建一个新的工作簿。

let wb = XLSX.utils.book_new();

工作簿包含两个属性。

一个属性是 SheetNames，是一个数组，另外一个属性是 Sheets，是一个对象。

每一个工作簿都是一个EXCEL文件，EXCEL文件包含Sheet，每一个Sheet都是一个表格。

SheetNames 属性用来存储 sheet 的名字，Sheets 属性用来存储相对应的 sheet（键值对的形式，键是 sheet 的名字也就是 SheetNames 属性里的项，值就是 sheet 的数据）。此时是刚创建的新的工作簿，所以都是空的。

3.创建 Sheet 对象

每一个 sheet 对象都是一个 excel 的 sheet，也就是一个表格。

创建 Sheet 对象的方法

根据情况的不同，创建 sheet 对象的方法也有很多。比如：

  • XLSX.utils.aoa_to_sheet()：  将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据。
  • XLSX.utils.table_to_sheet()：  将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并。
  • XLSX.utils.json_to_sheet()：将一个由对象组成的数组转成sheet 。
  • 等等

这些方法最后都会去一一介绍。

4.将 Sheet 对象加入到 工作簿中

通过 XLSX.utils.book_append_sheet() 方法可以将 sheet 对象加到工作簿中。

XLSX.utils.book_append_sheet() 方法接收三个参数，第一个是工作簿，第二个是 sheet 对象，第三个是工作簿中每一个 Sheet 的名字。

XLSX.utils.book_append_sheet(wb, ws, "sheetName");

如果工作簿中有多个 sheet ，就多次添加就好了。

XLSX.utils.book_append_sheet(wb, ws1, "sheetName");
XLSX.utils.book_append_sheet(wb, ws2, "sheetName2");

注意：添加多个 sheet 的时候名字不能相同。

5.下载表格

通过 XLSX.writeFile 方法下载表格。

接收三个参数，第一个是工作簿，第二个是工作簿的名字，第三个是配置项（可省略）。

XLSX.writeFile(wb, "名字.xlsx");

6.XLSX.utils.json_to_sheet() 方式创建 Sheet 对象

（1）XLSX.utils.json_to_sheet获取对象数组并且返回Sheet对象。

（2）默认的列表头由数组第一项对象的key决定，不过可以使用选项参数覆盖。

比如：

    exportFile1() {
      const tableData = [
        { department: "行政部", count: 2 },
        { department: "技术部", count: 2 },
      ];

      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      // 2.创建sheet对象
      let ws= XLSX.utils.json_to_sheet(tableData);
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时的表头就是数组第一项的key，也就是 department，count。

（3）如果数组第一个对象之外的对象的 key 有跟第一项不一样的，就会单独再添加一列。

比如：

    exportFile2() {
      const tableData = [
        { department: "行政部", count: 2 },
        { department: "技术部", count: 2 },
        { num: "yjb", count: 2 },
      ];
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      let ws = XLSX.utils.json_to_sheet(tableData);
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

 此时的表头就是除了数组第一项的key，也就是 department，count以外还会新增一列 num。

注意事项：如果 key 有重复的会被覆盖。

（4）XLSX.utils.json_to_sheet()接收两个参数。

除了上述的表格数据参数以外，还有一个配置参数。配置参数是一个对象，有以下几个属性：

属性默认值描述
header使用指定的列顺序 (默认 Object.keys(数据第一项))
dateNFFMT 14字符串输出使用指定的日期格式
cellDatesfalse存储日期为类型 d (默认是 n)
skipHeaderfalse如果值为true, 输出不包含header行

示例：header属性

是一个数组，用来指定列头。默认是 数组第一项对象的 key。

    exportFile3() {
      const tableData = [
        { S: 1, h: 2, e: 3, e_1: 4, t: 5, J: 6, S_1: 7 },
        { S: 2, h: 3, e: 4, e_1: 5, t: 6, J: 7, S_1: 8 },
      ];
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      let ws = XLSX.utils.json_to_sheet(tableData, {
        header: ["S", "h", "e", "e_1", "t", "J", "S_1"],
      });
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时 header 属性指定的列就是 "S", "h", "e", "e_1", "t", "J", "S_1"。

这么看好像设不设置都一样，因为默认就是这个，但是如果我们给 header 属性设置不一样的值。

    exportFile4() {
      const tableData = [
        { S: 1, h: 2, e: 3, e_1: 4, t: 5, J: 6, S_1: 7 },
        { S: 2, h: 3, e: 4, e_1: 5, t: 6, J: 7, S_1: 8 },
      ];
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      let ws = XLSX.utils.json_to_sheet(tableData, {
        header: ["A", "S", "h", "e", "e_1", "B", "t", "J", "S_1"],
      });
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

可以看见此时 header 属性的值已经不是默认的值了，多了几个值。

 可以看到表格的列也相对应的增加了，这个有什么用暂时不知道。

示例：skipHeader属性

是一个布尔值，如果为 true，不展示表格的表头，默认 false。

    exportFile5() {
      const tableData = [
        { A: "S", B: "h", C: "e", D: "e", E: "t", F: "J", G: "S" },
        { A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7 },
        { A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 },
      ];
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      let ws = XLSX.utils.json_to_sheet(tableData, {
        header: ["A", "B", "C", "D", "E", "F", "G"],
        skipHeader: true,
      });
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

设置 skipHeader 属性为 true 以后，表格的表头就不会导出。

（5）拓展：XLSX.utils.sheet_add_json

XLSX.utils.sheet_add_json 也是获取一个对象数组，并且更新一个已存在的工作表对象。

接收三个参数，第一个是被更新的 sheet 对象，第二个是更新内容（对象数组），第三个是配置对象。配置对象有以下几个属性：

属性默认值描述
header使用指定的列顺序 (默认 Object.keys(数据第一项))
dateNFFMT 14字符串输出使用指定的日期格式
cellDatesfalse存储日期为类型 d (默认是 n)
skipHeaderfalse如果值为true, 输出不包含header行
origin使用指定的单元格作为起点 (查看下方表格)
origin描述
(cell object)使用指定的单元格(单元格对象)
(string)使用指定的单元格 (A1样式的单元格)
(number >= 0)从指定行的第一列开始(0索引)
-1从第一列开始添加到工作表底部
(default)从单元格A1开始

示例：origin 为 (string)

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet(
        [],
        { header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: false }
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

这是基础的表格（只有表头）导出，没有使用 XLSX.utils.sheet_add_json 更新 sheet 对象。

这是导出结果。

此时使用 XLSX.utils.sheet_add_json 更新 sheet 对象，且origin为 A2，代表 从 表格A 列第二行开始更新。

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet(
        [],
        { header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: false }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 1, B: 2 },
          { A: 2, B: 3 },
          { A: 3, B: 4 },
        ],
        { skipHeader: true, origin: "A2" }
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

这是导出结果。 

 如果 origin为 A3，代表 从表格 A 列第三行开始更新。

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet(
        [],
        { header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: false }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 1, B: 2 },
          { A: 2, B: 3 },
          { A: 3, B: 4 },
        ],
        { skipHeader: true, origin: "A3" }
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

这是导出结果。 

  如果 origin为 B3，代表 从 表格B列第三行开始更新。

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet(
        [],
        { header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: false }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 1, B: 2 },
          { A: 2, B: 3 },
          { A: 3, B: 4 },
        ],
        { skipHeader: true, origin: "B3" }
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

这是导出结果。

此时可能会有一些疑惑，为什么是更新内容 { A: 1, B: 2 }, { A: 2, B: 3 },{ A: 3, B: 4 } 会跑到表头是B和C的列下去，按理说应该是只有表头是B的列更新（因为是从表格B列开始更新，会以为表格A列也就是表头是A的列会被忽略）。

{ A: 1, B: 2 } 这里的 A 和 B 指的不是表头是 A 或者 B，只是一个代名词，就相当于第一列和第二列，不一定指的是表头是 A 的列或者表头是 B 的列，也不是指表格 A 列或者表格 B 列。指的就是更新内容的第一列和第二列。换成别的也行，只是习惯用ABCD。且会以第一项的key值来确定更新内容的顺序。

举个例子：

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet([], {
        header: ["A", "B", "C", "D", "E", "F", "G"],
        skipHeader: false,
      });
      XLSX.utils.sheet_add_json(
        ws,
        [
          { X: 1, Y: 2, Z: 3 },
          { X: 1, Z: 2, Y: 3 },
          { X: 1, W: 2, Z: 3 },
        ],
        { skipHeader: true, origin: "B3" }W
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时更新内容的第一项确定了更新顺序是 X Y Z，且从表格 B 列第三行开始更新，所以从表格 B 列第三行的内容就按照顺序更新了，第二项是  { X: 1, Z: 2, Y: 3 } ，所以第四行更新内容应该是 1  3  2，因为第一项已经确定更新顺序是 X Y Z，第三项是 { X: 1, W: 2, Z: 3 }，多了个 W，所以此时更新顺序应该为 X Y Z W，所以更新内容是 1 空白 3 2。

这是导出结果。

示例：origin 为 (cell object)

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet([], {
        header: ["A", "B", "C", "D", "E", "F", "G"],
        skipHeader: false,
      });
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 1, B: 2 },
          { A: 2, B: 3 },
          { A: 3, B: 4 },
        ],
        { skipHeader: true, origin: "A2" }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 5, B: 6, C: 7 },
          { A: 6, B: 7, C: 8 },
          { A: 7, B: 8, C: 9 },
        ],
        { skipHeader: true, origin: { r: 1, c: 4 }}
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时 origin 是一个对象，有两个属性 r 和 c，其中 r 代表 行（row），c 代表列（col）,而他们都是从 0 开始计数的，所以 origin: { r: 1, c: 4 } 就表示从第二行第五列开始更新。

这是导出结果。

 如果 r 和 c 都是 0 的话。

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet([], {
        header: ["A", "B", "C", "D", "E", "F", "G"],
        skipHeader: false,
      });
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 1, B: 2 },
          { A: 2, B: 3 },
          { A: 3, B: 4 },
        ],
        { skipHeader: true, origin: "A2" }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 5, B: 6, C: 7 },
          { A: 6, B: 7, C: 8 },
          { A: 7, B: 8, C: 9 },
        ],
        { skipHeader: true, origin: { r: 0, c: 0}}
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

因为从第一行开始更新，所以会把表头也给更新掉。

示例：origin 为 -1

origin 为 -1 代表从最底下的一行的第一列开始添加。

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet([], {
        header: ["A", "B", "C", "D", "E", "F", "G"],
        skipHeader: false,
      });
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 1, B: 2 },
          { A: 2, B: 3 },
          { A: 3, B: 4 },
          { A: 3, B: 4 },
        ],
        { skipHeader: true, origin: "A2" }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 5, B: 6, C: 7 },
          { A: 6, B: 7, C: 8 },
          { A: 7, B: 8, C: 9 },
        ],
        { skipHeader: true, origin: { r: 1, c: 4 } }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 4, B: 5, C: 6, D: 7, E: 8, F: 9, G: 0 },
          { A: 4, B: 5, C: 6, D: 7, E: 8, F: 9, G: 0 },
        ],
        {
          skipHeader: true,
          origin: -1,
        }
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时更新内容有两项，代表从最底下的行的第一列开始更新两项内容。

这是导出结果。

 示例：origin 为 (number >= 0)

表示从第 number + 1 行的第一列开始更新，因为从 0 开始数。

    exportFile6() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      console.log(wb);
      // 2.创建sheet对象
      var ws = XLSX.utils.json_to_sheet([], {
        header: ["A", "B", "C", "D", "E", "F", "G"],
        skipHeader: false,
      });
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 1, B: 2 },
          { A: 2, B: 3 },
          { A: 3, B: 4 },
          { A: 3, B: 4 },
        ],
        { skipHeader: true, origin: "A2" }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 5, B: 6, C: 7 },
          { A: 6, B: 7, C: 8 },
          { A: 7, B: 8, C: 9 },
        ],
        { skipHeader: true, origin: { r: 1, c: 4 } }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 4, B: 5, C: 6, D: 7, E: 8, F: 9, G: 0 },
          { A: 4, B: 5, C: 6, D: 7, E: 8, F: 9, G: 0 },
        ],
        {
          skipHeader: true,
          origin: -1,
        }
      );
      XLSX.utils.sheet_add_json(
        ws,
        [
          { A: 1, B: 1 },
          { A: 1, B: 1 },
        ],
        {
          skipHeader: true,
          origin: 10,
        }
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时 origin 为 10，表示从第 11 行的第一列开始更新。 

7.XLSX.utils.aoa_to_sheet() 方式创建 Sheet 对象

（1）XLSX.utils.aoa_to_sheet 获取二维数组并返回一个 sheet 对象。

（2）接收的二维数组中，第一项数组就是表头。这里表头可重复。

比如：

    exportFile7() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      // 2.创建sheet对象
      var ws = XLSX.utils.aoa_to_sheet([
        "SheetJS".split(""),
        [1, 2, 3, 4, 5, 6, 7],
        [2, 3, 4, 5, 6, 7, 8],
      ]);
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时第一项数组为 ["S", "h", "e", "e", "t", "J", "s"]，所以表头就是 S h e e J s。

这是导出结果。

（3） XLSX.utils.aoa_to_sheet 接收两个参数，除了表格数据以外，还有一个配置参数。

除了上述的表格数据参数以外，还有一个配置参数。配置参数是一个对象，有以下几个属性：

属性默认值描述
sheetStubsfalse为null值创建类型为z的单元格对象
dateNFFMT 14字符串输出使用指定的日期格式
cellDatesfalse存储日期为类型 d (默认是 n)

都不怎么用所以不做展示。

（4）拓展：XLSX.utils.sheet_add_aoa

XLSX.utils.sheet_add_aoa 获取一个二维数组，并且更新一个已存在的工作表对象。

接收三个参数，第一个是被更新的 sheet 对象，第二个是更新内容（二维数组），第三个是配置对象。配置对象有以下几个属性：

属性默认值描述
sheetStubsfalse为null值创建类型为z的单元格对象
dateNFFMT 14字符串输出使用指定的日期格式
cellDatesfalse存储日期为类型 d (默认是 n)
origin使用指定的单元格作为起点 (查看下方表格)
origin描述
(cell object)使用指定的单元格(单元格对象)
(string)使用指定的单元格 (A1样式的单元格)
(number >= 0)从指定行的第一列开始(0索引)
-1从第一列开始添加到工作表底部
(default)从单元格A1开始

示例：origin 为 (string)

    exportFile8() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      // 2.创建sheet对象
      var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split("")]);
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

这是基础的表格（只有表头）导出，没有使用 XLSX.utils.sheet_add_aoa 更新 sheet 对象。

这是导出结果。

此时使用 XLSX.utils.sheet_add_aoa 更新 sheet 对象，且origin为 A2，代表 从 表格A 列第二行开始更新。

    exportFile9() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      // 2.创建sheet对象
      var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split("")]);
      XLSX.utils.sheet_add_aoa(
        ws,
        [
          [1, 2],
          [2, 3],
          [3, 4],
        ],
        { origin: "A2" }
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

这是导出结果。

 示例：origin 为 (cell object)

    exportFile10() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      // 2.创建sheet对象
      var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split("")]);
      XLSX.utils.sheet_add_aoa(
        ws,
        [
          [1, 2],
          [2, 3],
          [3, 4],
        ],
        { origin: "A2" }
      );
      XLSX.utils.sheet_add_aoa(
        ws,
        [
          [5, 6, 7],
          [6, 7, 8],
          [7, 8, 9],
        ],
        { origin: { r: 1, c: 4 } }
      );
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时 origin 是一个对象，有两个属性 r 和 c，其中 r 代表 行（row），c 代表列（col）,而他们都是从 0 开始计数的，所以 origin: { r: 1, c: 4 } 就表示从第二行第五列开始更新。

这是导出结果。

示例：origin 为 -1

origin 为 -1 代表从最底下的一行的第一列开始添加。

    exportFile11() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      // 2.创建sheet对象
      var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split("")]);
      XLSX.utils.sheet_add_aoa(
        ws,
        [
          [1, 2],
          [2, 3],
          [3, 4],
        ],
        { origin: "A2" }
      );
      XLSX.utils.sheet_add_aoa(
        ws,
        [
          [5, 6, 7],
          [6, 7, 8],
          [7, 8, 9],
        ],
        { origin: { r: 0, c: 0 } }
      );
      XLSX.utils.sheet_add_aoa(ws, [[4, 5, 6, 7, 8, 9, 0]], { origin: -1 });
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时更新内容有一项，代表从最底下的行的第一列开始更新一项内容。

这是导出结果。

 示例：origin 为 (number >= 0)

表示从第 number + 1 行的第一列开始更新，因为从 0 开始数。

    exportFile12() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();
      // 2.创建sheet对象
      var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split("")]);
      XLSX.utils.sheet_add_aoa(
        ws,
        [
          [1, 2],
          [2, 3],
          [3, 4],
        ],
        { origin: "A2" }
      );
      XLSX.utils.sheet_add_aoa(
        ws,
        [
          [5, 6, 7],
          [6, 7, 8],
          [7, 8, 9],
        ],
        { origin: { r: 1, c: 4 } }
      );
      XLSX.utils.sheet_add_aoa(ws, [[4, 5, 6, 7, 8, 9, 0]], { origin: -1 });
      XLSX.utils.sheet_add_aoa(ws, [[4, 5, 6, 7, 8, 9, 0]], { origin: 7 });
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

此时 origin 为 7，所以从第八行第一列开始更新。

这是导出结果。

8.XLSX.utils.table_to_sheet() 方式创建 Sheet 对象

（1） XLSX.utils.table_to_sheet 获取一个table DOM元素并且返回一个 Sheet 对象。

（2）接收的 table DOM元素什么数据格式，最后生成的 Sheet 表格就是什么格式。

比如：

    <el-table
      :data="tableData"
      stripe
      border
      style="width: 500px; margin-top: 20px"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center', background: 'pink' }"
      id="sheetjs"
    >
      <el-table-column label="a" prop="a"></el-table-column
      ><el-table-column label="b" prop="b"></el-table-column
      ><el-table-column label="c" prop="c"></el-table-column
    ></el-table>
  data() {
    return {
      tableData: [
        { a: 1, b: 2, c: 3 },
        { a: 1, b: 2, c: 3 },
        { a: 1, b: 2, c: 3 },
        { a: 1, b: 2, c: 3 },
      ],
    };
  },

此时的表格在页面是这样的。

我们进行导出。

    exportFile13() {
      // 1.创建一个工作簿
      let wb = XLSX.utils.book_new();

      // 2.创建sheet对象
      var tbl = document.getElementById("sheetjs");
      var ws = XLSX.utils.table_to_sheet(tbl);
      
      // 3.将 sheet 对象插入工作簿
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");

      // 4.下载 excel
      XLSX.writeFile(wb, "out.xlsx");
    },

这是导出结果。

（3） XLSX.utils.table_to_sheet 接收两个参数，除了 table DOM元素以外，还有一个配置参数。

除了上述的表格数据参数以外，还有一个配置参数。配置参数是一个对象，有以下几个属性：

属性默认值描述
rawfalse如果值为true, 每一个单元格将会保存原始的字符串
dateNFFMT 14字符串输出使用指定的日期格式
cellDatesfalse存储日期为类型 d (默认是 n)
sheetRows0如果值 >0, 读取表格的第一个sheetRows行
displayfalse如果值为true, 隐藏的行和单元格将不会被解析

都不怎么用所以不做展示。

 （4）拓展：XLSX.utils.table_to_book 基于工作表会产生一个最小的工作簿。

该方法跟前面导出 excel 不同，不需要按照步骤去创建工作簿，生成 sheet 对象，把 sheet 对象加入到工作簿中，而是直接生成一个工作簿，并且已经有 sheet 内容。但是该方法只能生成一个 sheet。

    exportFile14() {
      var tbl = document.getElementById("sheetjs");
      var wb = XLSX.utils.table_to_book(tbl);
      XLSX.writeFile(wb, "out.xlsx");
    },

这是导出结果。

该方法也接收两个参数，除了 table DOM元素以外，还有一个配置参数，同 XLSX.utils.table_to_sheet 方法一样。 

js-xlsx/xlsx-style 纯前端数据导出Excel且支持自定义样式
weixin_38649188的博客
12-01 1万+
前端开发过程中经常遇到导出excel的需求。这种情况大多数都是服务端处理数据(QAQ至少我遇到的大多数都是这样)，然后返回一个链接，前端不需要管服务端怎么操作直接打开这个链接(window.location.href = url;)就能下载excel了。 但是事情往往没有那么简单，当表格数据不多，且没有分页的时候，服务端往往会把导出excel的操作扔给前端。。。。前端导出excel的情况也不少，经常做了就过了，现在整理出来分享下 效果图如下： 一开始我用的是**js-xlsx插件做的，这个导出基本的表格
纯前端导出excel
csr_monkey的博客
11-26 3747
今天在项目中遇到前端需要导出excel文件，可把我难住了！！！ 特别是网上都没有一个dome！口亨！！！ 看了三个篇博客，终于把三个博主的东东凑成了一个简单dome！！！ 1.引入外部依赖js文件： 外部引用文件： xlsx.core.min.js xlsx.full.min.js（包含了所有功能模块） 引用js文件在dist目录下，官方GitHub：https://github....
【Web】xlsx 库使用教程（实现 Excel 的导入和导出）
qq_45677671的博客
03-30 4896
vue 和 react 实现 Excel 数据的导入和导出
vue前端导出表格
最新发布
qq_48546536的博客
05-08 157
【代码】vue前端导出表格。
前端实现excel导出表格(纯前端实现)
liang04273的博客
01-06 4750
vue中前端自己实现excel导出表格。实现是给表格绑定一个id，通过获取dom来导出。
前端实现导出xlsx功能
qq_35181466的博客
03-25 549
【代码】前端实现导出xlsx功能。
纯前端导出xlsx文件
xiaokuangren_的博客
12-08 725
1.前端导出
前端导出excel
12-21
前端导出Excel，不用在后台处理，通过要导出的信息在界面显示，既可以通过js导出Excel。很实用
JS操作Excel：使用js-xlsx实现前端导出Excel文件
04-06
JavaScript是前端开发的主要语言，而js-...使用js-xlsx库实现前端导出Excel文件，首先要确保库已经被正确引入。通常，我们可以通过CDN链接在HTML文件中添加`<script>`标签来引入js-xlsx库，如以下代码所示： ```html ...
纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例
06-26
纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例
js-xlsx-master.zip_JSExcelXml-master_JS导出excel_excel导入_js-xlsx_j
07-15
`js-xlsx-master`和`JSExcelXml-master`是两个非常实用的库，专门用于在浏览器环境中处理Excel文件。这两个库都允许开发者通过纯JavaScript代码来创建、读取和修改Excel文件，极大地拓展了Web应用的功能。 `js-xlsx...
前端导出xlsx文件展示到页面-master.zip
11-05
js前端导出xlsx文件内容，并展示到页面上，可以将解析的数据转为常用的数组或obj格式传给后台
可以修改样式的js-xlsx
05-21
可以导出并修改excel样式的前端excel库，已同步社区最新版。...由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，遗憾的是无法修改导出表格的样式。
前端使用xlsx模板导出表格
xi1213的博客
09-04 1059
使用过程中需要注意读取数据时的异步处理。
前端导出.xlsx表格的几种方法
qq_51241304的博客
05-23 385
第一种==========================================如果需要导出固定格式或者导出的内容和table无关，请协商后端利用第二种方法导出）二、利用后端接口导出。此方法简单易用，前提是后端需要把导出内容写出来。（此方法是导出当前table表格页内的数据，利用插件： 先下载插件。
前端导出xlsx表
zsq199771的博客
06-17 407
前端导出Excel表
前端直接导出excel文件
记录工作
12-11 1824
开发中可能会有这样的需求，本地自己生成了一个表格，此时表格并没有上传到后台服务器上，所以无法通过接口进行下载，此时就需要前端自行处理了。
前端JS实现导出xlsx文件
yqdid的博客
12-13 721
亲测有用，只要前端能拿到的是表格全量数据，就能直接导出表格所有数据。但如果是后端分页查询的表格，前端每次只能查10条或20条的话，那当前每次也只能导出10条20条。不然的话需要前端存一下所有的数据才能一次导出所有，或者后端配合提供接口返回所有数据。需求背景： 需要导出表格的数据，由于后端不提供导出接口，所以由前端通过JSON数据导出实现。
前端导出excel（XLSX）表格的方案
m0_56459583的博客
11-16 2455
首先需要安装 npm i xlsx file-saver script-loader 这三个插件 还需要Export2Excel.js这个文件 ，可以直接复制到项目的src目录下面 /* eslint-disable */ import { saveAs } from 'file-saver' import XLSX from 'xlsx' function generateArray(table) { var out = []; var rows = table.querySelector
XLSX前端生成excel时添加背景色
06-08
要在前端生成Excel文件并添加背景色，你需要使用XLSX库中的`worksheet`对象。可以使用以下代码来设置单元格的背景色： ```javascript /* 创建worksheet */ var worksheet = XLSX.utils.json_to_sheet([ { Name: "John", Age: 30 }, { Name: "Jane", Age: 25 }, ]); /* 设置单元格样式 */ worksheet["A1"].s = { fill: { bgColor: { rgb: "FFFF0000" } } }; /* 将worksheet添加到workbook中 */ var workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); /* 生成Excel文件 */ XLSX.writeFile(workbook, "example.xlsx"); ``` 在上面的代码中，我们首先创建了一个`worksheet`对象，并使用`json_to_sheet`方法将数据转换为工作表。然后，我们使用`s`属性来设置单元格`A1`的样式，其中`s`属性是一个包含各种样式属性的对象。在此示例中，我们使用`fill`属性来设置单元格的背景色，该属性包含一个`bgColor`属性，用于指定背景颜色的RGB值。最后，我们将`worksheet`添加到`workbook`中，并使用`writeFile`方法将其保存为Excel文件。 需要注意的是，此方法仅在生成的Excel文件中显示背景色，而不会在Excel应用程序中显示背景色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值