这可能是前端处理excel最好的工具了

这篇具有很好参考价值的文章主要介绍了这可能是前端处理excel最好的工具了。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大家好,我是程序视点的小二哥!
今天小二哥要分享的是一个纯前端实现读取和导出excel文件的工具库:ExcelJS

ExcelJs 简介

功能十分简单:

读取,操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。
一个 Excel 电子表格文件逆向工程项目。

在本文中,我们使用xlsx文件。xlsx是Microsoft Excel使用的开放XML电子表格文件格式的文件扩展名。这也是工作中用得最多的一种文件之一。

安装

npm install exceljs

或CDN

<script src="https://cdn.jsdelivr.net/npm/exceljs@1.13.0/dist/exceljs.min.js" />

使用

首先,新建工作簿。

const ExcelJS = require('exceljs');

const wb = new ExcelJS.Workbook();

有个这个对象后,接下来的任何操作都是在这个工作簿对象上处理的。

读取

我们从现有的 xlsx 文件中读取。我们假设前两列中有一些数据。


const fileName = 'items.xlsx';

wb.xlsx.readFile(fileName).then(() => {
    
    const ws = wb.getWorksheet('Sheet1');

    const c1 = ws.getColumn(1);
    
    c1.eachCell(c => {

        console.log(c.value);
    });

    const c2 = ws.getColumn(2);
    
    c2.eachCell(c => {

        console.log(c.value);
    });
}).catch(err => {
    console.log(err.message);
});

这里注意几个API:
读取工作表数据,我们使用该函数:

wb.xlsx.readFile(xxx)

获取指定工作表:

const ws = wb.getWorksheet('Sheet1');

获取某列数据

ws.getColumn(1);

迭代每列中单元格的数据

c1.eachCell(c => {

    console.log(c.value);
});

写入

这里我们写入一个全新的xlsx文件。

const Excel = require('exceljs');

const fileName = 'simple.xlsx';

const wb = new Excel.Workbook();
const ws = wb.addWorksheet('My Sheet');

ws.getCell('A1').value = 'John Doe';
ws.getCell('B1').value = 'gardener';
ws.getCell('C1').value = new Date().toLocaleString();

const r3 = ws.getRow(3);
r3.values = [1, 2, 3, 4, 5, 6];

wb.xlsx
  .writeFile(fileName)
  .then(() => {
    console.log('file created');
  })
  .catch(err => {
    console.log(err.message);
  });

向新的工作簿中增加一张工作表

const ws = wb.addWorksheet('My Sheet');

向指定单元格写入数据

ws.getCell('A1').value = 'John Doe';

向指定行中写入一组数据

const r3 = ws.getRow(3);
r3.values = [1, 2, 3, 4, 5, 6];

最后就是写入一个文件:

wb.xlsx
    .writeFile(fileName)
    .then(() => {
      console.log('file created');
    })
    .catch(err => {
      console.log(err.message);
    });

其他

ExcelJs还支持写入多组数据

ws.addRows([
    [1, 2, 3, 4, 5],
    [6, 7, 8, 9, 10],
    [11, 12, 13, 14, 15],
    [16, 17, 18, 19, 20]]
);

添加列标题定义列键和宽度

const headers = [
    { header: 'First name', key: 'fn', width: 15 },
    { header: 'Last name', key: 'ln', width: 15 },
    { heade
    r: 'Occupation', key: 'occ', width: 15 },
    { header: 'Salary', key: 'sl', width: 15 },
]

ws.columns = headers;

ExcelJS的功能还远不止这些。
还有如页眉和页脚,冻结/拆分视图,自动筛选器,合并单元格等。
ExcelJS还支持读写CSV文件
更多内容,请查阅下方链接。

ExcelJS地址
https://github.com/exceljs/exceljs文章来源地址https://www.toymoban.com/news/detail-605680.html

到了这里,关于这可能是前端处理excel最好的工具了的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 想必大家都为测试用例头疼过,那么如何才能设计出一个“好的”测试用例

    目录 前言: “好的”测试用例具备的特征 1.等价类划分方法 2.边界值分析方法 “好的”测试用例的设计方法 测试用例设计的其他经验 作为测试人员,需要注意以下几点: 前言: 设

    2024年02月08日
    浏览(47)
  • 这可能是中国最好的13个开源项目

    好的开源项目对体验工具功能、加快开发速度、学习实现逻辑都能提供极大的便利。 然而,近些年开源项目数量暴涨、质量难以避免地有些良莠不齐。如何辨别高质量的开源项目呢? 隶属工信部中国电子技术标准化研究院的中国开源云联盟(COSCL)评出了2022年度13款优秀开源

    2024年02月05日
    浏览(40)
  • 可能是迄今为止最好用的WPF加载动画功能(没有之一)

    前言 当我们在开发应用程序时,用户体验往往是至关重要的一环。在应用程序加载大量数据或执行复杂操作时,为用户提供一个良好的加载体验变得至关重要。加载动画是其中一个有效的方式,它不仅能够告知用户应用程序正在进行工作,还能够缓解用户在等待过程中的焦虑

    2024年03月28日
    浏览(46)
  • Excel 导入导出(前端处理:xslx)(后端处理:hutool+poi || Easy Excel )

      目录 Excel 导入导出(前端处理:xslx) 代码示例 导入Excel数据 将数据封装好后传给后端  导出数据 预览(vue-office/excel\\\"……;docx-preview) Excel 导入导出(后端处理:hutool+poi || Easy Excel ) 前端 后端使用Hutool处理Excel 文件 Hutool-poi是针对Apache POI的封装,因此需要用户自行引入

    2024年01月24日
    浏览(72)
  • docker hub 访问不了,可以进行拉取和推送,但是不能进行注册登陆了,界面找不到了,大家一起讨论看看有什么好的解决办法。

    在 oschina 的地方找找了文章和原因: https://www.oschina.net/comment/news/241627 目前配置源还是可以正常的pull 和 push 的。 昨天刚把 IOT 项目的镜像推送上去。 但是登陆不了界面,创建不了新的应用了。还不是很方便。 https://jianmuhub.com/ 看上去貌似应用和镜像比较少. 还有个地方:d

    2024年02月09日
    浏览(47)
  • 这可能是最好、最详细的VSCode开发uni-app教程吧

    我们将使用VSCode写 uni-app ,不同于 Hbuilder X ,用VSCode是通过脚手架来创建项目,为什么我要用VSCode写呢?可能还是不太习惯 Hbuilder X 等等原因,还有就是不想换开发工具,觉得开发前端一个VSCode就够了,也不用去比较两者谁好谁坏,自己喜欢哪个用哪个,这里就不过多赘述了

    2024年02月02日
    浏览(112)
  • vue 实现前端处理 “数组数据“ 转excel格式文件,并导出excel表格

    一、安装插件 XLSX 二、页面引入        希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

    2024年01月18日
    浏览(57)
  • 可能是 Mac OS 上最好用的浏览器: Arc 浏览器

    先声明,本文纯粹自己的真实体会,文中的看法可能掺杂个人喜好,仅供参考。 学生时代用过很多浏览器,Chrome 为主、 360 安全浏览器、搜狗浏览器、Firefox、Edge 也短暂用过一段时间。 由于Firefox和 Edge 并没有比 Chrome 更好用,Chrome 内核的浏览器大同小异,而且 Chrome 插件比

    2024年02月03日
    浏览(46)
  • 前端处理二进制流文件导出为excel表

    将后端返回的二进制流文件 导出为excel表 用的时候直接调用showConfirm函数即可 最后效果 get接口是自己封装的,封装如下

    2024年02月11日
    浏览(44)
  • LayuiTable导出所有数据excel,无需修改后端代码,仅前端处理。

    layui table自带的导出功能仅导出单页的数据,搜索一番之后发现大部分都是通过另外发送ajax请求,让后端进行处理,或是生成excel下载链接,或是后端返回所有数据然后用table.exportFile导出。 其实可以利用render,设置limit为总数量实现数据重新加载并导出。 方法可行,并不推荐

    2024年02月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包