一、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。
<link rel=”styleSheet” href=”gc.spread.sheets.xx.x.x.css” />
<script src=”gc.spread.sheets.all.xx.x.x.min.js” type=”text/javascript”></script>
<script src=”gc.spread.sheets.resources.zh.xx.x.x.min.js” type=”text/javascript”></script>
b. 在頁面的body元素中添加一個DOM元素作為它的容器。
<div id=”ss” style=”width:100%; height:360px;border: 1px solid gray;”></div>
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>
…
<script src=’…/spreadjs/gc.spread.sheets.all.x.xx.xxxxx.x.min.js’ type=’text/javascript’></script>
<script src=’…/spreadjs/plugins/gc.spread.excelio.x.xx.xxxxx.x.min.js’ type=’text/javascript’></script>
</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 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用
相關推薦
excel表格制作教程（入門wps表格制作全步驟）
Excel表格為最常用辦公表格嗎，其制作在如今工作生活中是最常用到的，重要性可以說和會識字寫字一樣。如果你一點不會excel制作，沒關系，今天我們就以制作一個”成績單”為實例進行學…
如何恢復excel，excel表格數據恢復教程
Excel文件不小心誤刪了？沒關系，接下來就給大家介紹幾個非常好用的方法，幫助大家可以快速恢復文件。 一、電腦端 1.WPS恢復功能 第一個是WPS自帶的恢復功能，只要我們點擊左上…
鏈接怎么做，Excel制作超鏈接教程
Excel怎么做超鏈接？真是太簡單了！現在excel表格的強大之處已經不言而喻，做超鏈接也成為家常便飯。Excel怎么做超鏈接，這個問題的解決方法有很多，但是簡單快速且美觀的的方法…
excel不小心保存了怎么恢復，excel恢復以往數據教程
相信大家都有過誤刪文件的經歷，特別是誤刪了office文檔找不著，相當于要把工作重新做一遍，實在是太慘了，所以今天就教大家幾個非常好用的恢復方法。 一、電腦端 1.WPS備份中心 …
excel怎么恢復誤刪數據，excel恢復已往數據流程
Excel等文件難免會被誤刪掉，特別是有時候電腦壞了，一黑屏，什么東西都沒有了，所以你一定要學會以下幾種恢復方法。 一、手機端 1.華為恢復 第一種是用我們的華為手機，只要你選擇【…
excel怎么保存，excel快速保存技巧
excel是最基礎的辦公技能，我們需要熟練掌握，不過也會遇到一些問題，比如怎么恢復未保存的excel文件？下面就為大家講解一下。 1 打開excel 2 點擊”文件“ 3 點擊”信…
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。