Web前端最強(qiáng)JavaScript Excel處理插件-exceljs

紹

exceljs是一個(gè)讀取，操作和編寫電子表格數(shù)據(jù)和樣式到XLSX和JSON，從Excel電子表格文件逆向工程設(shè)計(jì)的項(xiàng)目。之所以稱它最強(qiáng)，是因?yàn)樗墓δ軓?qiáng)大，簡直就是專門為Excel打造的前端處理插件，到目前為止，筆者還尚未見過比這個(gè)更強(qiáng)大的前端插件，由于其強(qiáng)悍的前端處理能力，這就意味著有很多操作將減輕服務(wù)器端壓力，而且性能更加出色！

Github地址

https://github.com/exceljs/exceljs

安裝

安裝我們當(dāng)然是首選npm

npm install exceljs

創(chuàng)建工作簿

var workbook = new Excel.Workbook();

設(shè)置工作簿屬性

workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);

// 將工作簿日期設(shè)置為1904日期系統(tǒng)
workbook.properties.date1904 = true;

工作簿視圖

“工作簿”視圖控制Excel在查看工作簿時(shí)打開多少個(gè)單獨(dú)的窗口。

workbook.views = [
  {
    x: 0, y: 0, width: 10000, height: 20000,
    firstSheet: 0, activeTab: 1, visibility: 'visible'
  }
]

添加工作表

var sheet = workbook.addWorksheet('My Sheet');

用addWorksheet函數(shù)的第二個(gè)參數(shù)設(shè)置工作表的選項(xiàng)。

例如：

// 創(chuàng)建一個(gè)紅色標(biāo)簽顏色的工作表
var sheet = workbook.addWorksheet('My Sheet', {properties:{tabColor:{argb:'FFC0000'}}});

// 創(chuàng)建一個(gè)隱藏網(wǎng)格線的工作表
var sheet = workbook.addWorksheet('My Sheet', {properties: {showGridLines: false}});

// 創(chuàng)建一個(gè)第一行和列凍結(jié)的工作表
var sheet = workbook.addWorksheet('My Sheet', {views:[{xSplit: 1, ySplit:1}]});

刪除工作表

使用工作表id從工作簿中刪除工作表。

例如：

// 創(chuàng)建工作表
var sheet = workbook.addWorksheet('My Sheet');

// 使用工作表ID刪除工作表
workbook.removeWorksheet(sheet.id)

訪問工作表

// 迭代所有sheet
// 注意：workbook.worksheets.forEach仍然可以工作，但這個(gè)方式更好
workbook.eachSheet(function(worksheet, sheetId) {
  // ...
});

// 按名稱獲取表格
var worksheet = workbook.getWorksheet('My Sheet');

// 按ID獲取表格
var worksheet = workbook.getWorksheet(1);

。。。。。。以上只是部分文檔中的介紹，感興趣的小伙伴可以移步Github直接查看詳細(xì)的文檔，完整功能了解可參考下一個(gè)標(biāo)題

PS：提供了中文文檔

完整功能列表

創(chuàng)建工作簿

設(shè)置工作簿屬性

工作簿視圖

添加工作表

刪除工作表

訪問工作表

工作表狀態(tài)

工作表屬性

頁面設(shè)置

頁眉和頁腳

工作表視圖

凍結(jié)視圖
拆分視圖

Auto Filters

列

行

處理單個(gè)單元格

合并單元格

定義名稱

數(shù)據(jù)驗(yàn)證

樣式

數(shù)字格式
字體
對(duì)準(zhǔn)
邊框
填充
富文本

大綱級(jí)別

圖片

文件 I/O

XLSX：讀 XLSX寫 XLSX

CSV：讀 CSV寫 CSV

Streaming I/O：Streaming XLSX

瀏覽器

價(jià)類型

空值
合并單元格
數(shù)值
字符串值
日期值
超鏈接值
公式值
豐富的文本值
布爾值
錯(cuò)誤值

雖然以上功能還不能包括了Excel的所有功能，但也已經(jīng)相當(dāng)?shù)呢S富了！

總結(jié)

在之前的文章中曾介紹過另一個(gè)不錯(cuò)的前端Excel插件，感興趣的可以去看一看，exceljs擁有這么豐富的功能，如果你想開發(fā)一個(gè)功能強(qiáng)大的Web電子表格，不妨多嘗試嘗試！

val函數(shù)的工作原理

eval函數(shù)會(huì)評(píng)估一個(gè)給定的含有JavaScript代碼的字符串，并且試圖去執(zhí)行包含在字符串里的表達(dá)式或者一系列的合法的JavaScript語句。eval函數(shù)將把最后一個(gè)表達(dá)式或者語句所包含的值或引用作為返回值。

舉例說明

eval評(píng)估JavaScript表達(dá)式

var bar = 'bar';

var foobar = eval('"foo" + bar');

alert(foobar);

eval評(píng)估JavaScript語句

var bar = 'bar';

// if variable bar equals 'bar', foobar is the result of // last executing statement: bar="foo-bar";

var foobar = eval('if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}');

alert(foobar);// change the valuebar = 'foo';

// now our the last executed statement is: bar = "bar-foo";

// therefore the value of variable foobar has been changed

// into 'bar-foo'foobar = eval('if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}');

alert(foobar);

JSON的格式

JSON的格式是由大括號(hào)和由冒號(hào)（：）構(gòu)成的名值對(duì)所組成的。注意JSON格式與對(duì)象字面量 (object literals) 的區(qū)別：JSON的名字部分嚴(yán)格用引號(hào)+名字來表示。

舉例說明

對(duì)象的字面量

var objectLiteral = { name: "Objector.L", age: "24", special: "JavaScript", sayName: function() { return this.name; }

};

JSON對(duì)象

var jsonFormat = { "summary": "Blogs", "blogrolls": [ { "title": "Explore JavaScript", "link": "http://example.com/" }, { "title": "Explore JavaScript", "link": "http://example.com/" } ]

};

eval和JSON

由于Ajax的興起，JSON這種輕量級(jí)的數(shù)據(jù)格式作為客戶端與服務(wù)器之間的傳輸格式逐漸地流行起來，進(jìn)而出現(xiàn)的問題是如何將服務(wù)器端構(gòu)建好的JSON數(shù)據(jù)轉(zhuǎn)化為可用的JavaScript對(duì)象。利用eval函數(shù)無疑是一種簡單而直接的方法。在轉(zhuǎn)化的時(shí)候需要將JSON字符串的外面包裝一層圓括號(hào)：

var jsonObject = eval("(" + jsonFormat + ")");

為什么要加括號(hào)？

加上圓括號(hào)的目的是迫使eval函數(shù)在評(píng)估JavaScript代碼的時(shí)候強(qiáng)制將括號(hào)內(nèi)的表達(dá)式（expression）轉(zhuǎn)化為對(duì)象，而不是作為語句（statement）來執(zhí)行。舉一個(gè)例子，例如對(duì)象字面量{}，如若不加外層的括號(hào)，那么eval會(huì)將大括號(hào)識(shí)別為JavaScript代碼塊的開始和結(jié)束標(biāo)記，那么{}將會(huì)被認(rèn)為是執(zhí)行了一句空語句。所以下面兩個(gè)執(zhí)行結(jié)果是不同的：

alert(eval("{}"); // return undefined

alert(eval("({})");// return object[Object]

JSON格式的名字部分為什么要加引號(hào)？

因?yàn)閑val函數(shù)會(huì)將{foo:”bar”}解釋成合法的JavaScript語句，而非表達(dá)式。但是人們往往想要的是讓eval將這段代碼解釋成一個(gè)對(duì)象。所以JSON格式會(huì)強(qiáng)制你去在名字的外側(cè)加上引號(hào)再結(jié)合圓括號(hào)，這樣eval就不會(huì)錯(cuò)誤的將JSON解釋成代碼塊。

舉例說明

eval錯(cuò)誤解析語義

alert(eval('{foo:"bar"}')); // return "bar", incorrect

eval正確解析JSON

alert(eval('({"foo": "bar"})')); // return JSON object, correct

結(jié)論

理解eval的工作原理和json的嚴(yán)格的限定格式，合理結(jié)合eval和json應(yīng)用于JavaScript的數(shù)據(jù)傳遞和對(duì)象轉(zhuǎn)換。

following this format:

eval('{' + jsonString + ')');

言

package.json 是一個(gè)用于描述和配置項(xiàng)目的重要文件，其中包含了許多字段和選項(xiàng)，可以影響項(xiàng)目的構(gòu)建、依賴管理、腳本執(zhí)行等方面。了解這些字段可以幫助開發(fā)者更好地理解和控制項(xiàng)目的行為。

package.json對(duì)于大部分前端開發(fā)者來說，知道dependencies與devDependencies就夠了。但對(duì)于庫開發(fā)者或有更高級(jí)需求的開發(fā)者來說，了解 package.json 的其他字段是非常有必要的。

本文介紹的字段分為官方字段與非官方字段。非官方字段是被主流打包工具（webpack，Rollup）所支持，旨在提供更高級(jí)的配置和功能，以滿足特定的構(gòu)建需求，可能不具備通用性。

目前版本：v7.24.2

一、必須屬性

1. name

定義項(xiàng)目的名稱，不能以"."和"_"開頭，不能包含大寫字母

2. version

定義項(xiàng)目的版本號(hào)，格式為：大版本號(hào).次版本號(hào).修訂號(hào)

二、描述信息

1. description

項(xiàng)目描述

2. keywords

項(xiàng)目關(guān)鍵詞

3. author

項(xiàng)目作者

4. contributors

項(xiàng)目貢獻(xiàn)者

5. homepage

項(xiàng)目主頁地址

6. repository

項(xiàng)目代碼倉庫地址

7. bugs

項(xiàng)目提交問題的地址

8. funding

指定項(xiàng)目的資金支持方式和鏈接

三、依賴配置

1. dependencies

生產(chǎn)環(huán)境的依賴包

如果不使用脫字符（^），安裝的版本號(hào)固定；如果使用，則能安裝當(dāng)前大版本的最新版本，在package-lock.json中可查看當(dāng)前實(shí)際安裝的版本。

2. devDependencies

開發(fā)環(huán)境的依賴包，例如webpack、vite、babel、ESLint等。

3. peerDependencies

對(duì)等依賴的作用：

減小打包體積：例如使用react開發(fā)的組件庫，安裝react是必不可少的，而使用組件庫的開發(fā)者，本地項(xiàng)目肯定安裝了react，因此開發(fā)的組件庫中不必把react打包進(jìn)去（期望項(xiàng)目的使用者來提供這些模塊的實(shí)現(xiàn)）。
版本一致性：使用你的組件庫的開發(fā)者需要確保他們項(xiàng)目中安裝了與你聲明的對(duì)等依賴版本兼容的包，以確保組件庫正常運(yùn)行。

示例：聲明要使用組件庫，需在項(xiàng)目中安裝大于17.0.1版本的react

4. peerDependenciesMeta

將對(duì)等依賴標(biāo)記為可選，如果用戶沒有安裝對(duì)等依賴，npm不會(huì)發(fā)出警告

5. bundledDependencies

聲明捆綁依賴項(xiàng)（使用情景較少）

6. optionalDependencies

聲明可選依賴項(xiàng)（使用情景較少）

7. engines

聲明對(duì)npm或node的版本要求

目前對(duì)NPM來說，engines只是起一個(gè)說明的作用，即使用戶安裝的版本不符合要求，也不影響依賴包的安裝。但使用pnpm 和 yarn安裝，如果版本不符合要求會(huì)導(dǎo)致安裝失敗。

8. workspaces

單個(gè)代碼庫中統(tǒng)一管理多個(gè)包（monorepo），在workspaces聲明目錄下的package會(huì)軟鏈到根目錄的node_modules中。

1. 初始化項(xiàng)目

2. 聲明本項(xiàng)目是workspaces模式

表示所有子包都在packages文件夾下

3. 創(chuàng)建子包p1

在node_modules/.package-lock.json中可以看到 "link": true 鏈接符號(hào)信息

4. 新建packages/p1/index.js

5. 創(chuàng)建子包p2

6. 將子包p1添加到p2中

安裝，卸載等命令都是一樣的，只是多了"--workspace="參數(shù)（簡寫-w），用來指定在哪個(gè)包中執(zhí)行命令

7. 子包p2使用p1

workspaces功能與lerna類似，如果只需簡單地管理多個(gè)包，workspaces足夠了。lerna具有版本管理，發(fā)包提示，簡化多包項(xiàng)目發(fā)布流程等更多功能。

四、腳本配置

1. scripts

腳本入口

2. config

用于定義項(xiàng)目的配置項(xiàng)，例如設(shè)置環(huán)境變量

1. config 配置

2. scripts 配置

3. 新建index.js

運(yùn)行 npm run start，終端打印出 example.com

五、文件&目錄

1. module（非官方字段）

指定 ES 模塊入口文件

示例：當(dāng)其他開發(fā)者在他們的項(xiàng)目中導(dǎo)入你的包時(shí)，會(huì)加載并執(zhí)行包中的dist/index.esm.js

2. main

指定 CommonJS 模塊或 ES 模塊入口文件。如果不指定該字段，默認(rèn)是根目錄下的index.js

提示：從 Node.js 12.20.0 版本開始，"main" 字段也可以指定 ES 模塊的入口文件

3. browser

指定瀏覽器使用的入口文件，例如umd模塊。

4. types（非官方字段）

指定 TypeScript 類型聲明文件（.d.ts 文件）的路徑

5. exports（非官方字段）

當(dāng)打包工具支持exports字段時(shí)（webpack、Rollup 等），以上main，browser，module，types四個(gè)字段都被忽略

"." 表示默認(rèn)導(dǎo)出

"import": 指定了 ES module (ESM) 規(guī)范下的導(dǎo)出文件路徑

"require": 指定了 CommonJS 規(guī)范下的導(dǎo)出文件路徑

"browser": 指定了用于瀏覽器環(huán)境的導(dǎo)出文件路徑

"types": 指定了類型聲明文件的路徑

導(dǎo)出其他文件，例如除了導(dǎo)出默認(rèn)路徑，導(dǎo)出源文件

其他項(xiàng)目中使用

6. type（非官方字段）

指定模塊系統(tǒng)的使用方式，"commonjs"，"module"，"umd"，"json"

示例：指定模塊系統(tǒng)為ES module模式，使用CommonJS文件時(shí)，需顯式的定義為 .cjs 文件擴(kuò)展名，來明確指定這些文件為 CommonJS 模塊

7. files

指定哪些包被推送到npm服務(wù)器中

示例：只推送index.js和dist包到npm服務(wù)器

可以在項(xiàng)目根目錄新建一個(gè).npmignore文件，說明不需要提交到npm服務(wù)器的文件，類似.gitignore。寫在這個(gè)文件中的文件即便被寫在files屬性里也會(huì)被排除在外

8. bin

定義在全局安裝時(shí)可執(zhí)行的命令，例如構(gòu)建腳手架

9. man

Linux 中的幫助指令（使用情景較少）

10. directories

定義項(xiàng)目目錄結(jié)構(gòu)的字段（使用情景較少）

六、發(fā)布配置

1. private

防止私有包發(fā)布到npm服務(wù)器，要發(fā)布到npm上設(shè)為false

2. preferGlobal（非官方字段）

當(dāng)設(shè)置 "preferGlobal" 字段為 true 時(shí)，它表示你的包更適合以全局方式安裝，而不是作為項(xiàng)目的依賴項(xiàng)進(jìn)行本地安裝。

這個(gè)字段的設(shè)置是為了向用戶傳達(dá)關(guān)于你的包的最佳使用方式的建議。它并不會(huì)直接影響包的安裝方式或包管理器的行為。

3. publishConfig

在發(fā)布包時(shí)指定特定的配置

示例：指定包發(fā)布的注冊(cè)表 URL，指定所有用戶都可以訪問（私有的會(huì)收費(fèi)）

4. os

指定你的包適用的操作系統(tǒng)

示例：包只適用于darwin（macOS）和 linux

示例：禁用win32

5. cpu

該配置和OS配置類似，用CPU可以更準(zhǔn)確的限制用戶的安裝環(huán)境

6. license

指定軟件的開源協(xié)議：

ISC：在所有副本中保留版權(quán)聲明和許可證聲明，使用者就可以拿你的代碼做任何想做的事情，你也無需承擔(dān)任何責(zé)任

MIT：在所有副本或主要部分中保留版權(quán)聲明和許可證聲明，使用者就可以拿你的代碼做任何想做的事情，你也無需承擔(dān)任何責(zé)任

開源協(xié)議查詢地址：opensource.org/licenses/

七、第三方配置（非官方字段）

1. eslintConfig

eslint的配置，更推薦新建 .eslintrc 進(jìn)行配置

使用參考：新建 .eslintrc

2. babel

babel的配置，更推薦新建 .babelrc 進(jìn)行配置

3. unpkg

unpkg 是一個(gè)基于 CDN 的前端包托管服務(wù)，用于在瀏覽器中直接引用和加載 npm 上發(fā)布的包。

無需下載，直接通過 <script> 標(biāo)簽引用

4. lint-staged

lint-staged是一個(gè)在Git暫存文件上運(yùn)行l(wèi)inters的工具，通常配合gitHooks一起使用。

使用參考：配置 husky、lint-staged、@commitlint/cli

5. browserslist

告知支持哪些瀏覽器及版本，Autoprefixer常用到它

6. sideEffects

指示包是否具有副作用，協(xié)助Webpack，Rollup等進(jìn)行tree shaking

多數(shù)情況下可以直接設(shè)置為false，這樣打包工具就會(huì)自動(dòng)刪除未被import的代碼

但是有些情況例外

有一些特定的模塊文件，它們執(zhí)行一些副作用操作，如注冊(cè)全局事件監(jiān)聽器、修改全局狀態(tài)等。
告訴構(gòu)建工具不要將樣式文件排除在無用代碼消除的優(yōu)化范圍之外

八、結(jié)尾

原文鏈接：https://juejin.cn/post/7240805459288522808

在線咨詢

上一篇：告別Ｕ盤，遠(yuǎn)程傳送，手機(jī)、電腦視頻電視輕松看！
下一篇：如何利用python+selenium+ajax-hook抓取網(wǎng)頁后臺(tái)返回的json數(shù)據(jù)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Web前端最強(qiáng)JavaScript Excel處理插件-exceljs

紹

Github地址

安裝

創(chuàng)建工作簿

設(shè)置工作簿屬性

工作簿視圖

添加工作表

刪除工作表

訪問工作表

完整功能列表

總結(jié)

言

一、必須屬性

1. name

2. version

二、描述信息

1. description

2. keywords

3. author

4. contributors

5. homepage

6. repository

7. bugs

8. funding

三、依賴配置

1. dependencies

2. devDependencies

3. peerDependencies

4. peerDependenciesMeta

5. bundledDependencies

6. optionalDependencies

7. engines

8. workspaces

1. 初始化項(xiàng)目

2. 聲明本項(xiàng)目是workspaces模式

3. 創(chuàng)建子包p1

4. 新建packages/p1/index.js

5. 創(chuàng)建子包p2

6. 將子包p1添加到p2中

7. 子包p2使用p1

四、腳本配置

1. scripts

2. config

1. config 配置

2. scripts 配置

3. 新建index.js

五、文件&目錄

1. module（非官方字段）

2. main

3. browser

4. types（非官方字段）

5. exports（非官方字段）

6. type（非官方字段）

7. files

8. bin

9. man

10. directories

六、發(fā)布配置

1. private

2. preferGlobal（非官方字段）

3. publishConfig

4. os

5. cpu

6. license

七、第三方配置（非官方字段）

1. eslintConfig

2. babel

3. unpkg

4. lint-staged

5. browserslist

6. sideEffects

八、結(jié)尾

您的項(xiàng)目需求