【SheetJS】【js-xlsx】【xlsx】js表格处理

目录

中文教程:https://github.com/rockboom/SheetJS-docs-zh-CN/

英文详解:https://www.npmjs.com/package/xlsx

安装引用

bash 复制代码
npm install xlsx
javascript 复制代码
import * as XLSX from "xlsx";

导出文件

javascript 复制代码
  let title ="结果.xlsx"; //标题
  let aoa = [["序号", "工号", "姓名", "排序", "结果"]]; //表头
  // 每行数据
  tableData.forEach((item, index) => {
    aoa.push([
      index + 1,
      item.id,
      item.name,
      item.rank * 1,
      item.level,
    ]);
  });
  let worksheet = XLSX.utils.aoa_to_sheet(aoa); // 工作表对象
  let workbook = XLSX.utils.book_new(); // 文件对象
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  XLSX.writeFile(workbook, title); // 导出文件

设置列宽和行高

设置列宽,可将数字算为1个字符宽,中文算为2字符宽,导出结果较为美观

javascript 复制代码
worksheet["!cols"] = [{ wch: 10 }, { wch: 20 },...];

列属性,wpx、width、wch任选一个设置列宽即可

  • hidden ?: boolean ; // 如果为真,则隐藏列
  • wpx ?: number ; // 屏幕像素
  • width ?: number ; // Excel 的"最大数字宽度"中的宽度,width*256 是整数
  • wch ?: number ; // 字符宽度
  • level ?: number ; // 0 索引大纲/组级别
  • MDW ?: number ; // Excel 的"最大数字宽度"单位,总是整数

设置行

javascript 复制代码
worksheet["!rows"] = [{...},...]

行属性 ,hpx、hpt任选一

  • hidden ?: boolean ; // 如果为真,则隐藏行
  • hpx ?: number ; // 屏幕像素高度
  • hpt ?: number ; // 高度
  • level ?: number ; // 0 索引大纲/组级别

设置单元格

单元格属性

  • v 原始值
  • w 格式化文本
  • t 类型: b布尔值, e错误, n数字, d日期, s文本, z存根
  • f 单元格公式
  • F 如果公式是数组公式,则封闭数组的范围
  • D 如果为真,则数组公式是动态的
  • r 富文本编码
  • h 富文本的 HTML 呈现(
  • c 与单元格相关的评论
  • z 与单元格关联的数字格式字符串
  • l 单元格超链接对象 ( .Target持有链接, .Tooltip是工具提示)
  • s 单元格的样式/主题。 ps: 从文件读取时默认不提取行和列属性,写入文件时默认不保留。 选项 cellStyles: true 必须传递给相关的读取或写入函数。

单个单元格------设置注释

直接获取:worksheet["A1"]

javascript 复制代码
	  worksheet["A1"].c = [
        { a: "SheetJS", t: "注释内容" }
      ];
      worksheet["A1"].c.hidden = true; // 隐藏注释

单元格范围------设置数字类型

通过行号列号获取:worksheet[XLSX.utils.encode_cell({ r: R, c: C })]

javascript 复制代码
  // D2到E6范围
  let range = {
    s: { c: 3, r: 1 }, 
    e: { c: 4, r: 5 },
  };
  for (let R = 0; R <= range.e.r; ++R) {
    for (let C = 0; C <= range.e.c; ++C) {
      let cell = worksheet[XLSX.utils.encode_cell({ r: R, c: C })];
      cell.t = "n";
    }
  }
相关推荐
来自星星的坤25 分钟前
【Vue 3 + Vue Router 4】如何正确重置路由实例(resetRouter)——避免“VueRouter is not defined”错误
前端·javascript·vue.js
香蕉可乐荷包蛋4 小时前
浅入ES5、ES6(ES2015)、ES2023(ES14)版本对比,及使用建议---ES6就够用(个人觉得)
前端·javascript·es6
未来之窗软件服务5 小时前
资源管理器必要性———仙盟创梦IDE
前端·javascript·ide·仙盟创梦ide
西哥写代码6 小时前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
清风细雨_林木木6 小时前
Vue 中生成源码映射文件,配置 map
前端·javascript·vue.js
雪芽蓝域zzs7 小时前
JavaScript splice() 方法
开发语言·javascript·ecmascript
森叶8 小时前
Electron 主进程中使用Worker来创建不同间隔的定时器实现过程
前端·javascript·electron
霸王蟹8 小时前
React 19 中的useRef得到了进一步加强。
前端·javascript·笔记·学习·react.js·ts
霸王蟹8 小时前
React 19版本refs也支持清理函数了。
前端·javascript·笔记·react.js·前端框架·ts
codelxy8 小时前
vue引用cesium,解决“Not allowed to load local resource”报错
javascript·vue.js