语雀弃用SpreadJs?ExcelJS如何?

大家好,很高兴又见面了,我是”前端‬进阶‬”,由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!

前端‬进阶

前言

开始介绍ExcelJS之前,先说一个在线表格编辑的研发案例。

一开始在做在线表格时,语雀团队采用的是“SpreadJs+二次开发”的模式,后来发现功能越来越难做,维护和开发成本上升。于是,2019年5月语雀团队弃用了SpreadJs,开始自研。所以,本文也不再聚焦SpreadJs(如果有兴趣可以阅读文末资料),而是向大家介绍另一个在线表格控件ExcelJS。话不多说,直接开始。

1.什么是ExcelJS?

ExcelJS 是一个 JavaScript 包,充当 Excel 工作簿管理器。 根据其官方文档,exceljs 可以读取、操作电子表格数据和样式并将其写入 XLSX 和 JSON。 它是从 Excel 电子表格文件作为项目进行逆向工程。

ExcelJS具有以下能力:

  • 创建工作簿。
  • 创建工作表。
  • 处理页眉和页脚。
  • 设置冻结或拆分视图。
  • 设置自动过滤器。
  • 对行和列的数据操作。
  • 添加数据验证。
  • 添加样式。
  • 将图像插入工作簿。

此外,exceljs 更新及时并且完全免费,这一点和handsontable等在线表格解决方案相比确实有比较大的吸引力。

2.ExcelJS项目状态

从NPM的官方数据来看,ExcelJS的周下载量稳定在699,538左右,同时处于稳定的上升期。

语雀弃用SpreadJs?ExcelJS如何?

ExcelJS项目的NPM的官方数据

与ExcelJS的直接竞争者handsontable的周下载量124,151相比,ExcelJS的下载量也有5.6倍之多。

语雀弃用SpreadJs?ExcelJS如何?

ExcelJS的直接竞争者handsontable的周下载量

同时,从Github的统计数据来看,项目的star达到了惊人的10.6k,而且fork数量也达到了1.4K。

语雀弃用SpreadJs?ExcelJS如何?

而同类产品handsontable的star达到了17.5k,fork数量也达到了2.8k。从这点来说,Github的数据指标和NPM的真实下载量之间还是有一定的差异。不过,也从侧面反映了handsontable、ExcelJS都是非常优秀的在线表格开发工具。

3.ExcelJS使用

3.1 不同环境安装ExcelJS

const ExcelJS = require('exceljs');

如果在Node环境使用,还需要导入相应的polyfill。

// exceljs需要导入的polyfill
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');
// 基础polyfill
const ExcelJS = require('exceljs/dist/es5');

3.2 如何使用ExcelJS

创建一个新的工作簿

通过如下代码可以快速创建工作簿。

const workbook = new ExcelJS.Workbook();
// 添加工作簿属性
workbook.creator = 'Ng Wai Foong';
workbook.lastModifiedBy = 'Bot';
workbook.created = new Date(2021, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2021, 7, 27);

添加新工作表

可以通过以下代码将新工作表添加到之前创建的工作簿中:

const worksheet = workbook.addWorksheet('New Sheet');
// 红色标签颜色
const worksheet = workbook.addWorksheet('New Sheet', {properties:{tabColor:{argb:'FFC0000'}}});
// 隐藏网格线
const worksheet = workbook.addWorksheet('New Sheet', {views: [{showGridLines: false}]});
// 冻结第一行和第一列
const worksheet = workbook.addWorksheet('New Sheet', {views:[{state: 'frozen', xSplit: 1, ySplit:1}]});
// pageSetup 设置为 A4 - 横向
const worksheet =  workbook.addWorksheet('New Sheet', {
  pageSetup:{paperSize: 9, orientation:'landscape'}
});
// 页眉和页脚
const worksheet = workbook.addWorksheet('New Sheet', {
  headerFooter: {oddFooter: "Page &P of &N";, oddHeader: 'Odd Page'}
});

文件输入输出

exceljs 提供了一些辅助函数,用于根据用例读取和加载文件。一般来说,它分为:

  • file
  • stream
  • buffer

请注意,与文件 I/O 相关的操作会返回一个 Promise,并且必须与 await 关键字一起调用。如果您在函数内部使用它,请确保将函数设置为异步。

假设你有一个本地的excel文件,可以按如下方式进行读写:

// file读取
await workbook.xlsx.readFile(filename);
// file写
await workbook.xlsx.writeFile(filename);

如果有数据流,可以使用以下代码片段:

// 读取stream
await workbook.xlsx.read(stream);
// 写stream
await workbook.xlsx.write(stream);

在处理缓冲区时,您应该改为调用 load 和 writeBuffer 函数:

// buffer读取
await workbook.xlsx.load(data);
// buffer写
const buffer = await workbook.xlsx.writeBuffer();

这是读取上传的 excel 文件的示例。 fileList 是从 input 标签中获取的 FileList 对象。只需实例化一个新的二进制大对象 (BLOB) 并获取底层缓冲区。然后,将其传递给加载函数,如下所示:

const blob = new Blob([fileList[0]], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
const buffer = await blob.arrayBuffer();
const workbook = new ExcelJS.Workbook();
await workbook.xlsx.load(buffer);

4.本文总结

本文主要和大家介绍下Excel 工作簿管理器的JavaScript包exceljs,同时给出了几个简单的用法示例。因为笔者也没有在生产项目中使用、部署过exceljs,所以只是做了一个简短的介绍,但是文末的参考资料提供了大量优秀文档以供学习,如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

本文链接:https://www.dzdvip.com/45025.html 版权声明:本文内容均来源于互联网。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 395045033@qq.com,一经查实,本站将立刻删除。
(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年2月12日 09:31
下一篇 2023年2月12日 09:32

相关推荐

  • 工信部:360手机卫士、天气预报等14款APP侵害用户权益

    工业和信息化部高度重视用户权益保护工作,持续开展APP侵害用户权益专项整治行动。“3·15”国际消费者权益日来临前夕,为巩固治理成效,营造共同维护消费者权益的良好环境,我部开展APP侵害用户权益整治“回头看”,组织第三方检测机构对前期用户反映问题较多的内存清理类、手机优化类APP进行重点检测,并对去年发现问题的APP进行抽测,共发现14款APP(详见附件)仍然存在问题。上述APP应在3月21日前完成整改,逾期不整改或整改不到位的,我部将依法依规严厉处置。 附件:工业和信息化部通报存在问题的APP名单 工业和信息化部信息通信管理局 2022年3月14日 来源 工信微报

    2022年3月15日
    30
  • iPhone 13系列,你想知道的都在这里

    苹果官方正式公布将于 9 月 15 日凌晨 1 点(北京时间)举办 Apple 特别活动。 海报长这样。 嗷不好意思放错图了,其实是这样。   你没有看错,苦等一年的「十三香」,终于要来了! 但是吼,「十三香」重复再多次,也只是一个梗罢了。实际香不香,还得看升级了什么,价格如何。 So,我们收集了 iPhone 13 系列的最新爆料,这就带大家一探究竟。 和去年一样,iPhone 13 系列有三个尺寸、四个版本,分别为 5.4 英寸的 iPhone 13 mini,6.1 英寸的 iPhone 13、iPhone 13 Pro,6.7 英寸的 iPhone 13 Pro Max。     外观设计方面,iPhone 13 系列整体和上一代相近,直角中框、矩形相机、刘海等设计元素,都保留了下来。 但是细节,还是有些不一样的。 得益于微缝听筒的采用,以及结构光系统的重新设计,iPhone 13 的刘海终于变小了 。 准确的说是宽度变窄,高度没有什么变化。   虽然没有取消,但这也算是一种进步吧。 每次推出新 iPhone,苹果都会带来一些新颜色。爆料显示,此次 iPhone 13 系列将带来日落金和玫瑰金。 前者类似古铜色,后者有点粉色的意思。     值得注意的是,iPhone 12 Pro 中框容易沾指纹的缺点,13 Pro 可能会通过新涂层来解决。 除了刘海和配色之外,iPhone 13 系列的相机也会有所变化。 首先,13/13 mini 的镜头、闪光灯和麦克风采用对角线排列,辨识度在线。 其次,全系镜头模组变大、凸起更高,Pro 版本尤其明显。     既然如此,影像能力肯定也会有所提升。 爆料显示,iPhone 13 系列将全系搭载传感器位移式光学防抖,也就是去年 iPhone 12 Pro Max 独占的功能。 同时,全系超广角镜头的光圈都会变大,提升夜间拍摄效果。在此基础上,Pro 版本还将支持自动对焦,可能带来微距拍摄功能。 另外,iPhone 13 Pro 的长焦镜头将升级到 2.5 倍,Pro Max 主摄光圈将继续提升。 软件方面,iPhone 13 系列有望带来视频人像模式和天文摄影功能。 就像去年的 ProRAW 一样,iPhone 13 系列会针对视频拍摄,推出 ProRes 模式,但同样仅限于 Pro 系列。     高刷,可谓是近年手机…

    2021年9月12日
    23
  • 天猫魔盒怎么刷机(天猫魔盒刷机教程)

    对于突如其来的软件整顿,目前还可以用的几个影视软件芒果TV、华数TV、CIBN高清视频,大家是不是觉得挺难解决的呢?之前我们提到过可以把yunos系统刷成安卓系统,今天就跟大家分享下“天猫魔盒刷机教程”。 怎么给天猫魔盒刷机攻略?天猫魔盒是一款基于网络的机顶盒,可实现高清视频在线播放、网上购物、交水电费等众多特色功能。 【注意】 此版本仅为尝鲜预览版,只支持HDMI输出,刷机此ROM后使用AV接口的电视将没有信号,老电视的用户切勿尝试 【用户准备工作】 天猫魔盒TMB2200RA 平口螺丝刀或撬棒(用来撬盒子) TF卡 读卡器 刷机包 天猫魔盒刷机教程 把天猫魔盒刷成安卓系统教程 一、撬开盒子接口处卡扣 图中,盒子后面的是可以撬开的,使用平口螺丝刀或其他坚硬的撬棒工具撬下图中贴片(可从USB或网口,HDMI口入手),用户要注意力度,防止用力过度。 撬下贴片后盒子如下图所示,可以看到USB口上方有一个TF卡卡槽 二、制作TF启动卡 使用上文中下载的TF启动卡制作工具,将tool.zip文件解压至D盘根目录,将下载下来得到刷机包解压至D盘根目录。 打开刷机工具中下图所示的程序,将TF卡插入读卡器,读卡器插到电脑上。 刷机工具会检测出TF卡所在盘符,若没有,请手动选择 点击镜像文件,选择D盘根目录中的img刷机包 点击烧录,开始制作启动盘(此过程将持续3~5分钟,请耐心等待一会儿) 启动卡制作完成后,将TF卡按图所示插入盒子,给盒子通电,盒子将自动开始刷机过程 进度条走完后拔出TF卡重新给盒子插电,即刷机完成!

    2022年5月9日
    321
  • 点淘VS抖音电商直播

    随着各大平台电商获客成本不断提高,传统电商需要找到一个新的流量渠道。直播电商在疫情期间的高速增长让人们看到了它广阔的市场前景,其中点淘和抖音电商作为佼佼者,都有其闪光点。本文作者对此进行了分析,与你分享。 一、背景描述 传统电商自诞生,走过了出生期、成长期,如今在各个方面已趋于成熟。原有的各种流量引入手段也被开发近乎饱和。艾瑞咨询显示,自2016年起中国电商交易额增长速度开始放缓,各大平台电商获客成本不断提高,传统电商需要找到一个新的流量渠道。 数据来源:2020年中国视频内容电商行业白皮书 2019年,经历完探索期的视频内容行业进入快速增长期,短时频一度成为最火热的娱乐方式之一,同时也到了需要变现的阶段,这时候直播电商应运而生。根据艾瑞咨询:2019年,直播电商整体成交额达4512.9亿元,仅占网购整体规模的4.5%,而这一数据到了2021年直播电商成交额已达到19493.7亿元,占网购整体规模的15.2%,预计2020年直播渗透率可以增长到20.3%。直播电商正处于高速增长期。 二、竞品选择 点淘原为淘宝直播,是从淘宝中独立出的电商直播模块,是阿里依托直播逐步渗透视频内容行业的一个重要APP。抖音作为目前视频内容APP的佼佼者,也开始通过直播切入电商市场。本文将选择抖音直播作为竞品,分析他的优势、劣势并给出相应的建议。 三、竞品分析 1. 产品定位 点淘直播促成交易: 电商平台一般会使用图片或者已录好视频来展示商品详情,而点淘是通过引入带货大主播以及各大店铺主播,采用直播方式展示并推销商品。这会给消费者身临其境的感觉,带来更为真实,可靠的购物体验,以此提高商品的交易的成交率。 抖音电商直播兴趣购物: 用户打开抖音往往是为了满足娱乐消遣而非购物,在打开抖音浏览直播间或者视频时,抖音会给他推荐感兴趣的内容,利用兴趣调动用户的购物需求从而达成交易。 2. 用户分析 1)人群属性分析 年龄分布: 从年龄分布上来看,点淘的用户年龄有80%以上都处于26-40岁,而抖音直播用户比较均衡的分布于18-40岁,点淘相对于抖音直播在18-25岁的比例非常低。而在41岁以上的用户点淘比例高于抖音直播。由此可以看出1、点淘和抖音直播的用户都面向于中青年人士,大部分为80、90后;2点淘用户偏于中年人士,抖音直播的人群更为年轻化。 性别分布: 点淘和抖音直播的女性使用比例都高于男性,女…

    2021年5月26日
    171
  • 茉莉花的养殖方法和注意事项(茉莉花的养殖方法和修剪)

    1、追肥:养殖茉莉花时,需要每隔半个月追施一次稀薄的液肥。 2、浇水:春秋季每周浇水一次,夏季要每隔2-3天浇一次水、 3、光温:将茉莉花放置在向阳处,并将环境温度控制在20-35℃。 4、注意事项:将茉莉花枯黄叶、虫害枝和徒长枝全部剪去。 茉莉花,叶片四季翠绿,花朵洁白淡雅,散发浓郁的香味,在春夏季节开放,养在家里显得生机勃勃。下面为大家茉莉花的养殖方法和注意事项,浇水施肥注意方法,枝繁叶茂开花香。一起来学习下! 茉莉花的养殖方法 1、茉莉花的浇水方法 茉莉花喜欢湿润的生长环境,不同的季节浇水方法也有差别。在春季生长季节,需要每天下午浇1次水。夏季早晚各浇1次水。秋季大概每周浇2~3次水。冬季1周左右浇1次水。 无论在什么季节,每次浇水都要根据盆土的干湿情况进行,不要只追求浇水次数。每次浇水都要浇透了,不能浇半截水,也不能有积水。浇水时观察底部,直到底部有水从排水流出为止。多雨季节及时避雨,以免盆土及时,造成烂根。 茉莉花是喜欢微酸性的开花植物,使用自来水,需要放置3~5天再使用。避免土壤板结碱化。 2、茉莉花的施肥方法 在种植或换盆时,在盆底施入适量腐熟的农家肥肥料作为基肥,避免和根系直接接触,基肥上需要覆盖好土壤。 春季施加氮元素肥料,可将肥料稀释后浇灌在土壤表面,可萌发更多枝叶。 茉莉花花期集中在夏季,对养分的需求量大,开花前施加磷钾元素的肥料,可喷洒磷酸二氢钾叶面肥,促使它开放花朵,还可延长花期。 花期过后,每半个月左右施1次复合肥,大概连续追施3~4次,可补充开花消耗的养分,促使植株快速恢复。入冬后停止施肥。 3、茉莉花的光照管理 茉莉花需要多见阳光,不管在什么地区,都需要给它充足的光照。只有光照充足,才能让它株型强壮,多长花苞,并且花大味香。夏天正是盛花期,注意不要暴晒,放在光线良好的地方,保持通风,避免暴晒即可。 4、茉莉花的修剪方法 通常在早春或秋季来修剪茉莉花,可结合换盆的时候进行修剪,修剪过密、过长、枯萎和病虫害的枝条,部分老叶片也可以摘掉,促使植株萌发更多的新枝条。徒长枝条,需要剪掉顶部。花后及时剪掉残花,促使植株长出更多新的花苞。 茉莉花的注意事项 1、注意冬天最低养护温度不能低于10度,否则会造成叶片受损或干枯。如果温度低于5度,茉莉花就会被冻伤。 2、注意茉莉花在夏季不能重剪,否则容易将茉莉花给剪死。 3、注意室内养护要多通风,否则会滋…

    2022年6月6日
    233
  • 安装win10后,我关闭了这几个功能,电脑瞬间好用太多了

    Win10系统在启动之后,就开始运行大量预装的基本服务,有一些服务功能可能至今你都没有使用过,例如Cortana小娜、Windows Search。 像这些系统服务,想必大家平时也用不上,开启着也是占用系统大量资源,时间久了就会使win10变慢。 还有一个大多数用户都想关闭的“自动更新”服务,不少小伙伴也是拿它没有办法,每次自动更新时都占用了电脑大量的内存和网络。 所以,电脑安装了win10后,不妨禁用一些多余的系统服务,以提高计算机性能。 一、关闭windows自动更新 关闭win10自动更新的步骤比较繁杂,要是想真正实现彻底关闭这个功能,就需要这个方法进行。 按下win r组合快捷键,在运行窗口输入“services.msc”,打开服务。在里面找到并双击打开“windows update”。 先将启动项改为“禁用”,再点击下面的“停止”-“确定”。 切换到“恢复”选项卡,将第1次失败改为“无操作”,第2次失败改为“无操作”,后续失败改为“无操作”,之后确认。 这样还没有完全关闭自动更新,接下来要在注册表中设置一下。 在运行窗口输入”regedit”回车,打开组策略编辑器。 找到并打开以下路径的文件夹: “HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Services/UsoSvc” 将右侧“Start”文件的数值改为4。 之后修改“FailureActions”的二进制数据,将0010,0018开头的,往右边数第5个,把之前的01改为00。 接下来是关闭更新关联策略计划,在服务中双击打开“Windows Update Medic Service”,将启动项改为“禁用”,服务状态点“停止”-“确认”。 再打开组策略编辑器,依次打开计算机配置-管理模板-windows组件-windows更新,在右侧找到“配置自动更新”,设置为“已禁用”,保存应用。 并继续在右侧找到“删除使用所有windows更新功能和访问权限”,将其设置为“已启用”。 现在是最后一步了,在运行窗口中输入”taskschd.msc”打开任务计划程序。在左边依次点击Microsoft – Windows –WindowsUpdate,把里面展示的所有项目都设置为禁用即可。 二、禁用Cortana小娜W…

    2021年6月20日
    66