一、SpreadJS 簡介

SpreadJS 是一款基於 HTML5 的純 JavaScript 電子表格和網格功能控件，以「高速低耗、純前端、零依賴」為產品特色，可嵌入任何操作系統，同時滿足 .NET、Java、響應式 Web 應用及移動跨平台的表格數據處理和類 Excel 的表格應用開發，為終端用戶帶來親切的 Excel 體驗。

本文將以 xlsx 文件格式為例，展示如何使用 SpreadJS 實現前端導入和導出excel文件。

SpreadJS 官網
本文在線Demo示例
導入導出Excel視頻演示

1. 主要功能

a. 功能、UI 與 Excel 高度類似

b. 兼容 450 種以上的 Excel 公式

c. 符合 UMD 規範，可按需加載

d. 完善的數據可視化，支持形狀、圖表、迷你圖

e. 純前端導入、導出 Excel 文件

f. 使用 HTML5 圖形（Canvas）繪製界面，具備高性能和響應速度

2. 安裝包目錄結構

├── Spread.Sheets SpreadJS產品包

│ └── Designer SpreadJS 表格設計器

│ ├── Spread.Sheets-Designer.12.0.0.AppImage [Mac]

│ ├── Spread.Sheets-Designer.12.0.0.dmg [Linux]

│ └── Spread.Sheets-Designer.12.0.0 [Windows]

│ └── Spread.Sheets.Docs.12.0.0 SpreadJS 表格接口文檔

│ ├── content

│ └── index

│ └──
Spread.Sheets.Release.12.0.0 SpreadJS 表格 JavaScript 庫/演示用例

│ ├── css 樣式文件

│ ├── definition TS 引用文件

│ ├── readme

│ ├── samples 示例代碼（包括原生JS,Angular,Vue,React）

│ ├── scripts JS文件

│ ├── GrapeCity-EULA

│ └── LICENSE

3. 如何使用

a. Spread.Sheets不依賴任何第三方組件。它只需要引用下列文件：

gc.spread.sheets.xx.x.x.css，gc.spread.sheets.all.xx.x.x.min.js。

b. 在頁面的body元素中添加一個DOM元素作為它的容器。

c. 用代碼「new GC.Spread.Sheets.Workbook(document.getElementById(‘ss’), { sheetCount: 1 })」來初始化Spread。

window.onload = function () {

var spread = new GC.Spread.Sheets.Workbook(document.getElementById(‘ss’), { sheetCount: 1 });

};

d. 初始化 SpreadJS 在線示例

二、前端導入導出Excel

實現前端導入導出只需要引入 gc.spread.excelio 庫，使用 excelIO.open 和 excelIO.save 兩個方法即可，不需要配置任何選項，代碼十分簡潔易懂。

具體步驟如下：

前端導入導出支持將 Spread json 導出為excel文件(.xlsx)和將 excel 文件導入為 Spread json.

使用前端導入導出, 你需要將相關的js文件添加的 document 的 head 區域。例如:

<head>

…

</head>

初始化 Workbook 實例和 ExcelIO 實例：

var spread = new GC.Spread.Sheets.Workbook(document.getElementById(‘ss’));

var excelIo = new GC.Spread.Excel.IO();

接下來你就可以使用 open 方法將 excel 文件導入為 spread json，使用 save 方法將 spread json 導出為excel文件。例如:

//import excel file to Spread.Sheets json

excelIo.open(excelFile, function (json) {

var workbookObj = json;

workbook.fromJSON(workbookObj);

}, function (e) {

// process error

console.log(e);

});

//export Spread.Sheets json to excel file

excelio.save(json, function (blob) {

//do whatever you want with blob

//such as you can save it

}, function (e) {

//process error

console.log(e);

});

同時，你還可打開或保存一個帶有密碼保護的 excel 文件，只需要在 open 和 save 方法中傳入參數 options{password:xxxx} 即可。例如:

//import excel file to Spread.Sheets json

excelIo.open(excelFile, function (json) {

var workbookObj = json;

workbook.fromJSON(workbookObj);

}, function (e) {

// process error

console.log(e);

},{password:xxxx});

//export Spread.Sheets json to excel file

excelio.save(json, function (blob) {

//do whatever you want with blob

//such as you can save it

}, function (e) {

//process error

console.log(e);

},{password:xxxx});

前端導入導出 Excel 的示例源碼及數據源下載：

示例源碼：ExcelIO.html
數據源文件：excel_data.js

三、處理單元格合併

一般來說，前端生成 excel 而不是 csv，其最主要的原因都是為了解決 csv 不能實現單元格合併的問題，假設我們要生成帶有單元格格式的 Excel 文件，也可以通過 SpreadJS 內置屬性實現：

調用 addSpan 方法來合併指定區域的單元格, 以此來構建一個新的更大的單元格, 參見以下示例代碼:

// Merge cells and set label

sheet.addSpan(1, 4, 1, 7);

sheet.setValue(1, 4, “Goods”);

// Merge cells across multi rows (3) and columns (4)

sheet.addSpan(20, 1, 3, 4);

sheet.getCell(20, 1).value(“Demo”).hAlign.vAlign;

調用 removeSpan 方法來分解指定包含合併的單元格：

sheet.removeSpan(20, 1);

Workbook的 allowUserDragMerge 選項表明是否允許通過鼠標拖拽來合併單元格。把 allowUserDragMerge 改為 true，在選擇區域邊緣處會出現一個特殊的標記。

// default value is false

spread.options.allowUserDragMerge = true;

備註: 確定你要展現在合併單元格中的信息在合併前處於合併區域的最左上單元格, 合併單元格中的其他單元格信息將被隱藏, 直到合併信息被分解（與 Excel 相同）。

處理單元格合併的示例源碼及數據源下載：cellSpan.html

四、自定義 Excel 的文件樣式

Spread.Sheets 提供一個樣式的類, 其中包含很多可配置屬性, 如前景色、背景色等。

你可以通過這些屬性，構造一個樣式並設置不同的參數, 示例代碼如下:

var style = new GC.Spread.Sheets.Style();

style.backColor = ‘red’;

style.foreColor = ‘green’;

style.isVerticalText = ‘true’;

同樣，你也可以將此樣式設置給單元格, 行, 或者列:

//set style to cell.

sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport);

//set style to row.

sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport);

//set style to column.

sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport);

樣式在不同的層級結構中具有不同的優先級別: 單元格 > 行 > 列。

Spread.Sheets 支持給樣式設置一個名稱, 並將這個命名過的樣式加入到表單的名稱樣式集合中。這樣讓樣式的使用和管理更方便。

你可以構造一個名稱樣式, 並將此樣式添加到表單或者 Spread 控件的名稱樣式集合中，如：

var style = new GC.Spread.Sheets.Style();

style.name = ‘style1’;

style.backColor = ‘red’;

//add to sheet’s named style collection.

sheet.addNamedStyle(style);

//add to spread’s named style collection.

spread.addNamedStyle(style)

當名稱樣式添加到表單名稱樣式集合中後, 可以通過樣式的名稱找到它:

sheet.getNamedStyle(‘style1’);

spread.getNamedStyle(‘style1’)

如果名稱樣式不再使用, 你也可以將其從名稱集合中刪除掉:

sheet.removeNamedStyle(‘style1’);

spread.removeNamedStyle(‘style1’)

自定義Excel文件樣式的示例源碼：style.html

五、數據綁定

Spread.Sheets 支持綁定數據源到表單（綁定類型有表單級別綁定和單元格級別綁定兩種。)

你可以使用 setDataSource 和 getDataSource 方法來設置獲取數據源。在設置數據源之前，你可以使用 autoGenerateColumns 方法來控制是否自動生成綁定列。例如：

var customers = [

{ ID:0, Name:’A’, Info1:’Info0′ },

{ ID:1, Name:’B’, Info1:’Info1′ },

{ ID:2, Name:’C’, Info1:’Info2′ },

];

sheet.autoGenerateColumns = true;

sheet.setDataSource(customers);

你也可以使用 getDataItem 方法來獲取指定行的數據信息。

你按照如下方式將數據字段綁定到指定的列：

var datasource = [

{ name: ‘Alice’, age: 27, birthday: ‘1985/08/31’, position: ‘PM’ }

];

// bindColumn one by one

var nameColInfo = { name: ‘name’, displayName: ‘Display Name’, size: 70 };

var ageColInfo = { name: ‘age’, displayName: ‘Age’, size: 40, resizable: false };

var birthdayColInfo = { name: ‘birthday’, displayName: ‘Birthday’, formatter: ‘d/M/yy’, size: 120 };

var positionColInfo = { name: ‘position’, displayName: ‘Position’, size: 50, visible: false };

sheet.autoGenerateColumns = false;

sheet.setDataSource(datasource);

sheet.bindColumn(0, nameColInfo);

sheet.bindColumn(1, birthdayColInfo);

sheet.bindColumn(2, ageColInfo);

sheet.bindColumn(3, positionColInfo);

// or use bindColumns to bind all custom columns

var colInfos = [

{ name: ‘position’, displayName: ‘Position’, size: 50, visible: false },

{ name: ‘name’, displayName: ‘Display Name’, size: 70 },

{ name: ‘birthday’, displayName: ‘Birthday’, formatter: ‘d/M/yy’, size: 120 },

{ name: ‘age’, displayName: ‘Age’, size: 40, resizable: false },

];

sheet.autoGenerateColumns = false;

sheet.setDataSource(datasource);

sheet.bindColumns(colInfos);

數據綁定的示例源碼：sheetLevelBinding.html

以上就是使用 SpreadJS，實現前端導入和導出 excel 文件的具體步驟和示例代碼，其他如 Excel 公式、圖表、條件格式、JSON 序列化與反序列化、狀態欄等功能，可以在 SpreadJS 官網了解更多。

點擊了解更多可查看本文在線 DEMO 示例。

關於葡萄城
賦能開發者！葡萄城公司成立於 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具於一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，並為中國企業的信息化提供國際先進的開發工具、軟件和研發諮詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/234717.html