前端excle表格插件xlsx(3) - API专区

原创已于 2022-03-25 13:07:27 修改 · 3.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html #前端

于 2022-03-25 09:57:32 首次发布

本文介绍如何使用JavaScript操作Excel表格，包括创建新的工作簿、利用二维数组或JSON对象创建工作表、将工作表添加到工作簿中、修改表格数据等基本操作，并提供了单元格格式转换的方法。

创建表格

创建一个新的工作簿

注：在excle中，工作薄相当于一个笔记本，而工作表相关于笔记本中的一篇笔记

var workbook = XLSX.utils.book_new();

创建一个空的工作簿

用二维数组创建一个工作表

注：aoa是 array of arrays 的缩写

var worksheet = XLSX.utils.aoa_to_sheet(aoa, opts);
// 案例
var worksheet = XLSX.utils.aoa_to_sheet([
  ["A1", "B1", "C1"],
  ["A2", "B2", "C2"],
  ["A3", "B3", "C3"]
]);

上述代码效果
效果图

aoa_to_sheet高级用法

添加表头行

var worksheet= XLSX.utils.aoa_to_sheet([
  "一二三四五六七".split(""),
  [1,2,3,4,5,6,7],
  [2,3,4,5,6,7,8]
]);

在这里插入图片描述

JSON对象创建一个工作表

var worksheet = XLSX.utils.json_to_sheet(jsa, opts);
// 案例
      var jsonArr = [
        { name: "黄飞鸿", sex: "男", age: "25" },
        { name: "十三姨", sex: "女", age: "30" },
      ];
      var worksheet = XLSX.utils.json_to_sheet(jsonArr);

在这里插入图片描述

使用HTML表格数据来创建工作表

var worksheet = XLSX.utils.table_to_sheet(dom_element, opts);

把工作表添加到工作薄中

XLSX.utils.book_append_sheet(workbook, worksheet, sheet_name);
// 注： sheet_name 是指定工作表的名称

修改表格中的数据

修改表格中单个单元格的数据

XLSX.utils.sheet_add_aoa(worksheet, [[new_value]], { origin: address });

修改表格中多个单元格的数据

XLSX.utils.sheet_add_aoa(worksheet, aoa, opts);

读excle文件

生成JSON对象

var jsa = XLSX.utils.sheet_to_json(worksheet, opts);
// 案例
var worksheet = workbook.Sheets[workbook.SheetNames[0]]
var jsa = XLSX.utils.sheet_to_json(worksheet);
 console.log(JSON.stringify(jsa));
// [{"Name":"George Washington","Birthday":"1732-02-22"},{"Name":"John Adams","Birthday":"1735-10-19"}]

生成二维数组

var aoa = XLSX.utils.sheet_to_json(worksheet, {...opts, header: 1});
// 案例
var worksheet = workbook.Sheets[workbook.SheetNames[0]]
var jsa = XLSX.utils.sheet_to_json(worksheet,{ header: 1});
 console.log(JSON.stringify(jsa));
// [{"Name":"George Washington","Birthday":"1732-02-22"},{"Name":"John Adams","Birthday":"1735-10-19"}]

生成HTML页面

var html = XLSX.utils.sheet_to_html(worksheet);
// 案例
var worksheet = workbook.Sheets[workbook.SheetNames[0]];
var html = XLSX.utils.sheet_to_html(worksheet);
container.innerHTML = XLSX.utils.sheet_to_html(worksheet);

在这里插入图片描述

单元格格式转换

在xlsx中，行和列都是从0开始的，比如2列5行，在xlsx中就可以表示为 {c:1,r4} 其中,c:列，r:行。
单个单元格表示：B5 ====> {c:1,r:4}
区域单元格表示：A3:B7 ====> {s:{c:0, r:2}, e:{c:1, r:6}} 其中s:表示开始start,e表示结束end

	// 单个单元格
    var cell_ref = XLSX.utils.encode_cell({c:1, r:4});
    console.log(cell_ref); // B5
    var cell_value = XLSX.utils.decode_cell('B5')
    console.log(cell_value); // {c:1, r:4}
    // 区域单元格
    var cell_region_ref = XLSX.utils.encode_range({
      s: { c: 0, r: 2 },
      e: { c: 1, r: 6 },
    });
    console.log(cell_region_ref); //A3:B7
    var cell_region_value = XLSX.utils.decode_range("A3:B7");
    console.log(cell_region_value); //{s: { c: 0, r: 2 },e: { c: 1, r: 6 }}