【日常记录】【插件】excel.js 的使用

文章目录

    • 1. 引言
    • 2. excel.js
      • 2.1 创建工作簿和工作表
      • 2.2 excel文件的导出
      • 2.3 excel文件的导入
      • 2.4 列
      • 2.5 行
      • 2.6 添加行
      • 2.7 单元格
      • 2.8 给总价列设置自动计算(除表头行)
    • 3. 总结
    • 参考链接

1. 引言

前端导出excel文件常用库一般是 excel.js 和 xlsx.js

xlsx.js 导出数据确实方便，但是处理样式不大好处理，需要配合 xlsx-style 来处理样式问题，比较麻烦了

2. excel.js

npm 安装方式

npm install exceljs

浏览器端 安装方式

<script src="https://cdn.bootcdn.net/ajax/libs/exceljs/4.4.0/exceljs.js"></script>

2.1 创建工作簿和工作表

要先创建一个工作簿，然后才能创建工作表

const workbook = new ExcelJS.Workbook(); // 创建工作簿

const worksheet = workbook.addWorksheet("导入数据明细", { properties: { tabColor: { argb: 'FFC0000' } } }); // 创建一个工作表

在这里插入图片描述

用 wps打开就是这个样子， 一般不会设置这个 工作表的其他属性，最常用的还是直接创建一个工作表和设置 冻结行/列，这俩个操作更为常见

冻结第一行，列不做处理，代码如下

    worksheet.views = [{
      state: 'frozen',
      ySplit: 1,
    }];

在这里插入图片描述

2.2 excel文件的导出

官方提供了三种方式，最常用的是 写入 buffer

第一种：写入文件

// 写入文件
const workbook = createAndFillWorkbook();
await workbook.xlsx.writeFile(filename);

在这里插入图片描述

这种方式，其实是调用了 node的fs 模块 ，如若在浏览器环境直接调用的话，会报错

第二种方式：写入流

await workbook.xlsx.write(stream);

这种方式目前用的比较少，也是依赖于node 环境

第三种方式：写入buffer

// 写入 buffer
const buffer = await workbook.xlsx.writeBuffer();

这种一般比较多见

  1. 写入 buffer ，配合 FileSaver 库，进行导出文件
  2. 用原生 js 方式把 blob转化成一个链接，进行导出
    workbook.xlsx
      .writeBuffer()
      .then((buffer) => {
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        saveAs(blob, "导出excek.xlsx")
      })

    workbook.xlsx
      .writeBuffer()
      .then((buffer) => {
        const blob = new Blob([buffer], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        let aEl = document.createElement("a");
        aEl.style = "display: none";
        aEl.download = `测试excel导出${new Date().getTime()}.xlsx`;
        aEl.href = window.URL.createObjectURL(blob);// 创建blob 文件链接
        document.body.appendChild(aEl);
        aEl.click();
        document.body.removeChild(aEl);
        window.URL.revokeObjectURL(aEl.href); // 销毁链接


      })
      .catch((err) => {
        console.error(err)

      });

2.3 excel文件的导入

比如说，导入内容为这样的一个excel文件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" name="" id="file">
  <script src="https://cdn.bootcdn.net/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
  <script>
    document.querySelector('#file').addEventListener("change", function (e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {
          const workbook = new ExcelJS.Workbook();

          let importData = [];
          workbook.xlsx
            .load(e.target.result)
            .then(async (res) => {
              const worksheet = workbook.getWorksheet(1);

              let importData = [];
              worksheet.eachRow(
                {
                  includeEmpty: true, // 包含空行
                },
                function (row, rowNumber) {
                  console.log(row, rowNumber, row.values);
                  importData.push(row.values)
                }
              );
              console.log("所有行", importData);



            })
            .catch((err) => {
              console.log("err", err);
            });
        };

        reader.readAsArrayBuffer(file);
      }

    });

  </script>
</body>

</html>

这里的 row,rowNumber,row.values 打印内容如下

在这里插入图片描述

这里要特别注意的是，在 excel 文件里面，三行四列 但这每一行的值，数组长度是5，因为便于取数，这个数组的第一项是null，因为数组第一项索引是0，所以，索引1 才是 这一行第一列的值

2.4 列

    worksheet.columns = [{
      header: "序号",
      key: "Index",
      width: 7,
    },
    {
      header: "单价",
      key: "Price",
    }, {
      header: "数量",
      key: "Quantity"
    }, {
      header: "总价",
      key: "TotalPrice"
    }]
  • header：列的标题
  • key：列表ID
  • width：列的宽度，这个宽度和像素不一样，需要自己调试

导出的效果如下

在这里插入图片描述

官网还列举了其他的案例
最常用的还是 设置列

// 添加列标题并定义列键和宽度
// 注意：这些列结构仅是构建工作簿的方便之处，除了列宽之外，它们不会完全保留。
worksheet.columns = [
  { header: 'Id', key: 'id', width: 10 },
  { header: 'Name', key: 'name', width: 32 },
  { header: 'D.O.B.', key: 'DOB', width: 10, outlineLevel: 1 }
];

// 通过键，字母和基于1的列号访问单个列
const idCol = worksheet.getColumn('id');
const nameCol = worksheet.getColumn('B');
const dobCol = worksheet.getColumn(3);

// 设置列属性

// 注意：将覆盖 C1 单元格值
dobCol.header = 'Date of Birth';

// 注意：这将覆盖 C1:C2 单元格值
dobCol.header = ['Date of Birth', 'A.K.A. D.O.B.'];

// 从现在开始，此列将以 “dob” 而不是 “DOB” 建立索引
dobCol.key = 'dob';

dobCol.width = 15;

// 如果需要，隐藏列
dobCol.hidden = true;

// 为列设置大纲级别
worksheet.getColumn(4).outlineLevel = 0;
worksheet.getColumn(5).outlineLevel = 1;

// 列支持一个只读字段，以指示基于 `OutlineLevel` 的折叠状态
expect(worksheet.getColumn(4).collapsed).to.equal(false);
expect(worksheet.getColumn(5).collapsed).to.equal(true);

// 遍历此列中的所有当前单元格
dobCol.eachCell(function(cell, rowNumber) {
  // ...
});

// 遍历此列中的所有当前单元格，包括空单元格
dobCol.eachCell({ includeEmpty: true }, function(cell, rowNumber) {
  // ...
});

// 添加一列新值
worksheet.getColumn(6).values = [1,2,3,4,5];

// 添加稀疏列值
worksheet.getColumn(7).values = [,,2,3,,5,,7,,,,11];

// 剪切一列或多列（右边的列向左移动）
// 如果定义了列属性，则会相应地对其进行切割或移动
// 已知问题：如果拼接导致任何合并的单元格移动，结果可能是不可预测的
worksheet.spliceColumns(3,2);

// 删除一列，再插入两列。
// 注意：第4列及以上的列将右移1列。
// 另外：如果工作表中的行数多于列插入项中的值，则行将仍然被插入，就好像值存在一样。
const newCol3Values = [1,2,3,4,5];
const newCol4Values = ['one', 'two', 'three', 'four', 'five'];
worksheet.spliceColumns(3, 1, newCol3Values, newCol4Values);

2.5 行

这个地方，一般常用的是，读取行，读取整个工作表的行/读取指定行的值

官方的例子如下

// 获取一个行对象。如果尚不存在，则将返回一个新的空对象
const row = worksheet.getRow(5);

// Get multiple row objects. If it doesn't already exist, new empty ones will be returned
const rows = worksheet.getRows(5, 2); // start, length (>0, else undefined is returned)

// 获取工作表中的最后一个可编辑行（如果没有，则为 `undefined`）
const row = worksheet.lastRow;

// 设置特定的行高
row.height = 42.5;

// 隐藏行
row.hidden = true;

// 为行设置大纲级别
worksheet.getRow(4).outlineLevel = 0;
worksheet.getRow(5).outlineLevel = 1;

// 行支持一个只读字段，以指示基于 `OutlineLevel` 的折叠状态
expect(worksheet.getRow(4).collapsed).to.equal(false);
expect(worksheet.getRow(5).collapsed).to.equal(true);


row.getCell(1).value = 5; // A5 的值设置为5
row.getCell('name').value = 'Zeb'; // B5 的值设置为 “Zeb” - 假设第2列仍按名称键入
row.getCell('C').value = new Date(); // C5 的值设置为当前时间

// 获取行并作为稀疏数组返回
// 注意：接口更改：worksheet.getRow(4) ==> worksheet.getRow(4).values
row = worksheet.getRow(4).values;
expect(row[5]).toEqual('Kyle');

// 通过连续数组分配行值（其中数组元素 0 具有值）
row.values = [1,2,3];
expect(row.getCell(1).value).toEqual(1);
expect(row.getCell(2).value).toEqual(2);
expect(row.getCell(3).value).toEqual(3);

// 通过稀疏数组分配行值（其中数组元素 0 为 `undefined`）
const values = []
values[5] = 7;
values[10] = 'Hello, World!';
row.values = values;
expect(row.getCell(1).value).toBeNull();
expect(row.getCell(5).value).toEqual(7);
expect(row.getCell(10).value).toEqual('Hello, World!');

// 使用列键按对象分配行值
row.values = {
  id: 13,
  name: 'Thing 1',
  dob: new Date()
};

// 在该行下方插入一个分页符
row.addPageBreak();

// 遍历工作表中具有值的所有行
worksheet.eachRow(function(row, rowNumber) {
  console.log('Row ' + rowNumber + ' = ' + JSON.stringify(row.values));
});

// 遍历工作表中的所有行（包括空行）
worksheet.eachRow({ includeEmpty: true }, function(row, rowNumber) {
  console.log('Row ' + rowNumber + ' = ' + JSON.stringify(row.values));
});

// 连续遍历所有非空单元格
row.eachCell(function(cell, colNumber) {
  console.log('Cell ' + colNumber + ' = ' + cell.value);
});

// 遍历一行中的所有单元格（包括空单元格）
row.eachCell({ includeEmpty: true }, function(cell, colNumber) {
  console.log('Cell ' + colNumber + ' = ' + cell.value);
});

// 提交给流一个完成的行
row.commit();

// 行尺寸
const rowSize = row.cellCount;
const numValues = row.actualCellCount;

2.6 添加行

这个操作，在导出数据的最为常见

    worksheet.addRow({
      Index: 1,
      Price: 9.9,
      Quantity: 1,
      TotalPrice: 1
    })
    worksheet.insertRow(2, {
      Index: 2,
      Price: 3.8,
      Quantity: 1,
      TotalPrice: 1
    })

首先是添加了一行，这一行在 Excel 中，行数应该是2 ，但是后面又插入了一行，并且指定了行数为2， 那么第一行，就得往下移，效果如下

在这里插入图片描述

官方代码

// Add a couple of Rows by key-value, after the last current row, using the column keys
worksheet.addRow({id: 1, name: 'John Doe', dob: new Date(1970,1,1)});
worksheet.addRow({id: 2, name: 'Jane Doe', dob: new Date(1965,1,7)});

// Add a row by contiguous Array (assign to columns A, B & C)
worksheet.addRow([3, 'Sam', new Date()]);

// Add a row by sparse Array (assign to columns A, E & I)
const rowValues = [];
rowValues[1] = 4;
rowValues[5] = 'Kyle';
rowValues[9] = new Date();
worksheet.addRow(rowValues);

// Add a row with inherited style
// This new row will have same style as last row
// And return as row object
const newRow = worksheet.addRow(rowValues, 'i');

// Add an array of rows
const rows = [
  [5,'Bob',new Date()], // row by array
  {id:6, name: 'Barbara', dob: new Date()}
];
// add new rows and return them as array of row objects
const newRows = worksheet.addRows(rows);

// Add an array of rows with inherited style
// These new rows will have same styles as last row
// and return them as array of row objects
const newRowsStyled = worksheet.addRows(rows, 'i');

2.7 单元格

如若要是对第一行的列，进行美化怎么处理呢？

  1. 先获取到第一行
  2. 使用 Excel.js 的 行遍历单元格方法
     const headerRow = worksheet.getRow(1);
    // 遍历一行中的所有单元格（包括空单元格）
    headerRow.eachCell({
      includeEmpty: true
    }, function (cell, colNumber) {

      console.log(cell, colNumber);

	  // getCell 传入一个单元格地址，就可以获取到这个单元格，然后对这个单元格进行操作
      worksheet.getCell(cell._address).font = {
        size: 16,// 字体大小
        bold: true // 加粗
      }
      worksheet.getCell(cell._address).alignment = {
        vertical: 'middle', // 垂直方向剧中
        horizontal: 'center' // 水平方向剧中
      }
    });

下面这个图，就是每次遍历单元格的时候，第一个参数值，里面有一个 _address 存放的就是当前遍历到的单元格的地址

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.8 给总价列设置自动计算(除表头行)

在excel文档中，是可以使用 函数的，同样在excel.js库中也可以使用

    console.log('当前sheet总行数', worksheet.rowCount);
    for (let i = 2; i <= worksheet.rowCount; i++) {

      worksheet.getCell(`D${i}`).value = {
        formula: `PRODUCT(B${i},C${i})`
      };
      console.log(worksheet.getCell(`D${i}`));
    }

下载下来excel 发现，这一个单元格，就不是单纯的数字了，而是一个函数，这个函数是表示的意思是，这个D2单元格 = B3 * C3。就是说，当 B3 / C3 单元格的值发现变化的时候，他就会重新计算，类似于vue 的 计算属性

在这里插入图片描述

3. 总结

其实 excel.js 文档里面，还有很多操作，现在只是列举了一些简单的操作，其他的可以观看文档学习一下，文档很清晰

参考链接

  • excel.js gitee 地址
  • FileSaver.js GitHub地址

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/798904.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

技术成神之路：设计模式（六）策略模式

技术成神之路：设计模式（六）策略模式

1.介绍 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;封装每一个算法&#xff0c;并使它们可以相互替换。策略模式使得算法的变化独立于使用算法的客户端。 2.主要作用 策略模式的主要作用是将算法或行为…
阅读更多...
大数据基础：Hadoop之Yarn重点架构原理

大数据基础：Hadoop之Yarn重点架构原理

文章目录 Hadoop之Yarn重点架构原理 一、Yarn介绍 二、Yarn架构 三、Yarn任务运行流程 四、Yarn三种资源调度器特点及使用场景 Hadoop之Yarn重点架构原理 一、Yarn介绍 Apache Hadoop Yarn(Yet Another Reasource Negotiator&#xff0c;另一种资源协调者)是Hadoop2.x版…
阅读更多...
优化理论——迭代方法

优化理论——迭代方法

线性回归建模 训练&#xff0c;预测 { ( x ( i ) , y ( i ) ) } \{(x^{(i)},y^{(i)})\} {(x(i),y(i))} ⼀个训练样本&#xff0c; { ( x ( i ) , y ( i ) ) ; i 1 , ⋯ , N } \{(x^{(i)},y^{(i)});i1,\cdots ,N\} {(x(i),y(i));i1,⋯,N} 训练样本集 { ( x 1 ( i ) , x 2 ( i…
阅读更多...
爬虫管理解决方案：让数据收集变得高效且合规

爬虫管理解决方案：让数据收集变得高效且合规

一、为何数据收集的效率与合规性同等重要&#xff1f; 随着大数据技术的飞速发展&#xff0c;数据收集已成为企业决策与市场洞察的核心驱动力。然而&#xff0c;在信息海洋中精准捕捞的同时&#xff0c;如何确保这一过程既高效又不触碰法律的红线&#xff0c;是每个数据实践者…
阅读更多...
vue实现动态图片(gif)

vue实现动态图片(gif)

目录 1. 背景 2. 分析 3. 代码实现 1. 背景 最近在项目中发现一个有意思的小需求&#xff0c;鼠标移入一个盒子里&#xff0c;然后盒子里的图就开始动起来&#xff0c;就像一个gif一样&#xff0c;然后鼠标移出&#xff0c;再按照原来的变化变回去&#xff0c;就像变形金刚…
阅读更多...
YOLOv5和LPRNet的车牌识别系统

YOLOv5和LPRNet的车牌识别系统

车牌识别系统 YOLOv5和LPRNet的车牌识别系统结合了深度学习技术的先进车牌识别解决方案。该系统整合了YOLOv5目标检测框架和LPRNet文本识别模型 1. YOLOv5目标检测框架 YOLO是一种先进的目标检测算法&#xff0c;以其实时性能和高精度闻名。YOLOv5是在前几代基础上进行优化的…
阅读更多...
树莓派关机

树莓派关机

文件 shutdown.sh #!/usr/bin/bash sudo shutdown -r nowpython 文件开头添加 #!/usr/bin/python3
阅读更多...
Apache AGE 从文件导入图

Apache AGE 从文件导入图

您可以使用以下说明从文件创建图形。本文档介绍了&#xff1a; 包含从文件加载图形的函数的当前分支的信息使图形从文件创建的函数的说明作为输入的加载函数的CSV文件的结构&#xff0c;以及相关的注意事项 以及从文件加载国家和城市的简单源代码示例。 用户可以通过两个步骤…
阅读更多...
从课本上面开始学习的51单片机究竟有什么特点，在现在的市场上还有应用吗？

从课本上面开始学习的51单片机究竟有什么特点，在现在的市场上还有应用吗？

引言 51单片机&#xff0c;作为一种经典的微控制器&#xff0c;被广泛应用于各种嵌入式系统中。尽管如今ARM架构的高性能低成本单片机在市场上占据主导地位&#xff0c;但51单片机凭借其独特的优势依然在某些领域保持着应用价值。本文将深入探讨51单片机的特点、架构、应用以及…
阅读更多...
信必优收到著名生命科学前沿客户表扬信

信必优收到著名生命科学前沿客户表扬信

近日&#xff0c;信必优收到著名生命科学前沿客户表扬信&#xff0c;客户表扬信必优员工在岗位上勤奋敬业、积极主动&#xff0c;圆满完成了既定的工作任务&#xff0c;在多个项目上展现出卓越技术能力和团队合作精神&#xff1b;其对工作的热情和对质量的追求给整个团队树立了…
阅读更多...
WEB07Vue+Ajax

WEB07Vue+Ajax

1. Vue概述 Vue&#xff08;读音 /vjuː/, 类似于 view&#xff09;&#xff0c;是一款用于构建用户界面的渐进式的JavaScript框架&#xff08;官方网站&#xff1a;https://cn.vuejs.org&#xff09;。 在上面的这句话中呢&#xff0c;出现了三个词&#xff0c;分别是&#x…
阅读更多...
05：中断

05：中断

中断 1、定时器T0中断1.1、定时器中断触发1.2、案例&#xff1a;通过定时器T0中断来实现灯间隔1s亮灭 2、外部中断2.1、外部中断的触发2.2、案例&#xff1a;使用外部中断0通过震动传感器控制LED1的亮灭 1、当中央处理机CPU正在处理某件事的时候外界发生了紧急事件请求&#xf…
阅读更多...
Linux 扩展硬盘容量

Linux 扩展硬盘容量

根分区的硬盘容量不够了需要添加容量 扩展硬盘容量前提是需要虚拟机关机才能进行以下操作 在虚拟中找到虚拟机设置 >> 点击硬盘 >> 选择扩展 >> 输入自已要扩展的大小 >> 确定 这些设置好之后&#xff0c;启动虚拟机 fdisk /dev/sda n p 三个回车…
阅读更多...
数据库作业d8

数据库作业d8

要求&#xff1a; 一备份 1 mysqldump -u root -p booksDB > booksDB_all_tables.sql 2 mysqldump -u root -p booksDB books > booksDB_books_table.sql 3 mysqldump -u root -p --databases booksDB test > booksDB_and_test_databases.sql 4 mysql -u roo…
阅读更多...
在Windows中搭建Docker环境Docker Desktop（保姆级）

在Windows中搭建Docker环境Docker Desktop（保姆级）

在Windows中搭建Docker环境Docker Desktop&#xff08;保姆级&#xff09; 文章目录 在Windows中搭建Docker环境Docker Desktop&#xff08;保姆级&#xff09;一、Docker Desktop是什么&#xff1f;二、Docker Desktop下载与安装①&#xff1a;下载②&#xff1a;安装③&#…
阅读更多...
HTTP背后的故事：理解现代网络如何工作的关键（一）

HTTP背后的故事：理解现代网络如何工作的关键（一）

一.HTTP是什么 概念 &#xff1a; 1.HTTP ( 全称为 " 超文本传输协议 ") 是一种应用非常广泛的 应用层协议。 2.HTTP 诞生与1991年. 目前已经发展为最主流使用的一种应用层协议. 3.HTTP 往往是基于传输层的 TCP 协议实现的 . (HTTP1.0, HTTP1.1, HTTP2.0 均为 T…
阅读更多...
Python应用开发——30天学习Streamlit Python包进行APP的构建（15）：优化性能并为应用程序添加状态

Python应用开发——30天学习Streamlit Python包进行APP的构建（15）：优化性能并为应用程序添加状态

Caching and state 优化性能并为应用程序添加状态！ Caching 缓存 Streamlit 为数据和全局资源提供了强大的缓存原语。即使从网络加载数据、处理大型数据集或执行昂贵的计算，它们也能让您的应用程序保持高性能。 本页仅包含有关 st.cache_data API 的信息。如需深入了解缓…
阅读更多...
昇思25天学习打卡营第22天|GAN图像生成

昇思25天学习打卡营第22天|GAN图像生成

今天是参加昇思25天学习打卡营的第22天&#xff0c;今天打卡的课程是“GAN图像生成”&#xff0c;这里做一个简单的分享。 1.简介 今天来学习“GAN图像生成”&#xff0c;这是一个基础的生成式模型。 生成式对抗网络(Generative Adversarial Networks&#xff0c;GAN)是一种…
阅读更多...
【Django+Vue3 线上教育平台项目实战】构建课程详情页与集成视频播放功能

【Django+Vue3 线上教育平台项目实战】构建课程详情页与集成视频播放功能

文章目录 前言一、课程列表页面a.后端代码b.前端代码 二、课程详情页面a. 视频播放功能的集成1.获取上传视频的链接地址2.集成在前端页面中1>使用vue-alipayer视频播放组件2>使用video标签 b. 页面主要内容展示1.后端代码1>分析表2>核心逻辑 2.前端代码3.效果图 前…
阅读更多...
Java中的Filter流：理解与应用

Java中的Filter流：理解与应用

Java中的Filter流&#xff1a;理解与应用 1、字节Filter流1.1 FilterInputStream1.2 FilterOutputStream 2、字符Filter流2.1 FilterReader2.2 FilterWriter 3、使用Filter流的好处 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java的…
阅读更多...
最新文章

Copyright @ 2022~2023