【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";
    }
  }
相关推荐
别拿曾经看以后~21 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试26 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR41 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山8 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄9 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询