整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SpreadJS 是一款基于 HTML5 的純 JavaScript 電子表格和網(wǎng)格功能控件，以“高速低耗、純前端、零依賴”為產(chǎn)品特色，可嵌入任何操作系統(tǒng)，同時(shí)滿足 .NET、Java、響應(yīng)式 Web 應(yīng)用及移動(dòng)跨平臺(tái)的表格數(shù)據(jù)處理和類 Excel 的表格應(yīng)用開發(fā)，為終端用戶帶來親切的 Excel 體驗(yàn)。
本文將以 xlsx 文件格式為例，展示如何使用 SpreadJS 實(shí)現(xiàn)前端導(dǎo)入和導(dǎo)出excel文件。
1. 主要功能
a. 功能、UI 與 Excel 高度類似
b. 兼容 450 種以上的 Excel 公式
c. 符合 UMD 規(guī)范，可按需加載
d. 完善的數(shù)據(jù)可視化，支持形狀、圖表、迷你圖
e. 純前端導(dǎo)入、導(dǎo)出 Excel 文件
f. 使用 HTML5 圖形（Canvas）繪制界面，具備高性能和響應(yīng)速度
2. 安裝包目錄結(jié)構(gòu)
├── Spread.Sheets SpreadJS產(chǎn)品包
│ └── Designer SpreadJS 表格設(shè)計(jì)器
│ ├── 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元素中添加一個(gè)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 在線示例
實(shí)現(xiàn)前端導(dǎo)入導(dǎo)出只需要引入 gc.spread.excelio 庫，使用 excelIO.open 和 excelIO.save 兩個(gè)方法即可，不需要配置任何選項(xiàng)，代碼十分簡(jiǎn)潔易懂。
具體步驟如下：
前端導(dǎo)入導(dǎo)出支持將 Spread json 導(dǎo)出為excel文件(.xlsx)和將 excel 文件導(dǎo)入為 Spread json.
<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>
var spread=new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
var excelIo=new GC.Spread.Excel.IO();
//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);
});
//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 而不是 csv，其最主要的原因都是為了解決 csv 不能實(shí)現(xiàn)單元格合并的問題，假設(shè)我們要生成帶有單元格格式的 Excel 文件，也可以通過 SpreadJS 內(nèi)置屬性實(shí)現(xiàn)：
// 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;
sheet.removeSpan(20, 1);
Workbook的 allowUserDragMerge 選項(xiàng)表明是否允許通過鼠標(biāo)拖拽來合并單元格。把 allowUserDragMerge 改為 true，在選擇區(qū)域邊緣處會(huì)出現(xiàn)一個(gè)特殊的標(biāo)記。
// default value is false
spread.options.allowUserDragMerge=true;
備注: 確定你要展現(xiàn)在合并單元格中的信息在合并前處于合并區(qū)域的最左上單元格, 合并單元格中的其他單元格信息將被隱藏, 直到合并信息被分解（與 Excel 相同）。
處理單元格合并的示例源碼及數(shù)據(jù)源下載：cellSpan.html
Spread.Sheets 提供一個(gè)樣式的類, 其中包含很多可配置屬性, 如前景色、背景色等。
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);
樣式在不同的層級(jí)結(jié)構(gòu)中具有不同的優(yōu)先級(jí)別: 單元格 > 行 > 列。
Spread.Sheets 支持給樣式設(shè)置一個(gè)名稱, 并將這個(gè)命名過的樣式加入到表單的名稱樣式集合中。這樣讓樣式的使用和管理更方便。
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 支持綁定數(shù)據(jù)源到表單（綁定類型有表單級(jí)別綁定和單元格級(jí)別綁定兩種。)
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 方法來獲取指定行的數(shù)據(jù)信息。
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);
數(shù)據(jù)綁定的示例源碼：sheetLevelBinding.html
以上就是使用 SpreadJS，實(shí)現(xiàn)前端導(dǎo)入和導(dǎo)出 excel 文件的具體步驟和示例代碼，其他如 Excel 公式、圖表、條件格式、JSON 序列化與反序列化、狀態(tài)欄等功能，可以在 SpreadJS 官網(wǎng)了解更多。
點(diǎn)擊了解更多可查看本文在線 DEMO 示例。
關(guān)于葡萄城賦能開發(fā)者！葡萄城公司成立于 1980 年，是全球領(lǐng)先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計(jì)工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國(guó)的分支機(jī)構(gòu)，面向全球市場(chǎng)提供軟件研發(fā)服務(wù)，并為中國(guó)企業(yè)的信息化提供國(guó)際先進(jìn)的開發(fā)工具、軟件和研發(fā)咨詢服務(wù)。葡萄城的控件和軟件產(chǎn)品在國(guó)內(nèi)外屢獲殊榮，在全球被數(shù)十萬家企業(yè)、學(xué)校和政府機(jī)構(gòu)廣泛應(yīng)用
.
在三菱works2全部標(biāo)簽中建立標(biāo)簽導(dǎo)出.csv格式文件，在
EBPro中按照下列操作步驟導(dǎo)入.csv格式文件
Step 1.
在works2中新建地址標(biāo)簽
1、選擇全局標(biāo)簽->填寫標(biāo)簽名稱和數(shù)據(jù)類型->填寫軟元件地址->選擇中標(biāo)簽行->預(yù)約
2、查看登記標(biāo)簽中系統(tǒng)標(biāo)簽關(guān)聯(lián)公開->全局標(biāo)簽->寫入至CSV
Step 2.
導(dǎo)入標(biāo)簽
1、新建HMI工程文件->添加三菱L/Q網(wǎng)口驅(qū)動(dòng)->導(dǎo)入標(biāo)簽->選中導(dǎo).csv格式文件
2、選擇標(biāo)簽地址
何將CSV文件導(dǎo)入IZYTRONIQ？
初次注冊(cè)時(shí)認(rèn)證IZYTRONIQ
當(dāng)您購買 IZYTRONIQ 軟件后，您會(huì)通過郵件收到一個(gè)注冊(cè)碼或者如果您買的儀器含有軟件，這個(gè)注冊(cè)碼會(huì)附在隨機(jī)來的綠色信封內(nèi)。
01、在 https://reg.izytron.com/網(wǎng)址下使用您收到的注冊(cè)碼進(jìn)行注冊(cè)
02、然后大約15分鐘左右您的郵箱將會(huì)收到一個(gè)認(rèn)證碼
03、http://download.izytron.com/網(wǎng)址下載IZYTRONIQ 軟件
04、進(jìn)行安裝
05、初次啟動(dòng)軟件時(shí)輸入認(rèn)證碼
注冊(cè)碼樣式: xxxx-xxxx-xxxx
認(rèn)證碼樣式: xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx
對(duì)于線下認(rèn)證方式請(qǐng)參考軟件說明書。
將CSV文件導(dǎo)入IZYTRONIQ
為了將CSV 文件導(dǎo)入IZYTRONIQ, 文件需要符合一定格式。
首先導(dǎo)出一個(gè)空白的文件, 這個(gè)文件可以用來填報(bào)數(shù)據(jù)或者再次導(dǎo)入。
請(qǐng)按如下步驟順序操作。
生成一個(gè)正確的電子表格:
01、打開IZYTRONIQ, 導(dǎo)航至 [Portable Objects] -> [Enter, Change, Lists]。
02、點(diǎn)擊 [Add Element] 然后在數(shù)據(jù)庫中創(chuàng)建一個(gè) [Customer] 及[Device]。
03、點(diǎn)擊 [Portable Objects] -> [Export]。
04、選擇保存格式 [CSV File] 及想要保存的位置, 然后點(diǎn)擊確認(rèn)導(dǎo)出。
05、選中這個(gè)新創(chuàng)建的的customer 然后點(diǎn)擊 [Export to CSV File]。
在CSV文件中填入主數(shù)據(jù):
1. 打開這個(gè)新建的CSV文件. [CustomerID] 必須在 A1窗口呈現(xiàn)。
2. 根據(jù)實(shí)際情況填寫主數(shù)據(jù)。
請(qǐng)按如下語法結(jié)構(gòu)進(jìn)行填寫:
LastTestingDate: 請(qǐng)安這樣的格式: DD.MM.YYYY填寫一個(gè)日期。
LastTestingResult: 請(qǐng)?zhí)顚?“passed” 或者“NotPassed”。
TestingInterval: 請(qǐng)?zhí)钊胍粋€(gè)數(shù)值代表測(cè)試周期(比如“12”)
IsActive: 請(qǐng)?zhí)顚憽癟rue” 或者 “False”。
必須填寫的項(xiàng)目包括:
CustomerID, DeviceType, ID 及 Designation
保存: 點(diǎn)擊并按如下格式保存——CSV(MS-DOS)(*.csv).
示例:
注意: 如果表格中ID numbers有前置零的命名（如0001）, 請(qǐng)確保所有單元保存的格式為TEXT – 否則在保存時(shí)這些零會(huì)被默認(rèn)去除。
導(dǎo)入已修改完畢的CSV 文件:
01、打開 IZYTRONIQ 并點(diǎn)擊 [Portable Objects] -> [Import]
02、選擇[From File] 并選中剛才那個(gè) CSV 文件
注意電子表格在未打開的狀態(tài)才可操作!
03、點(diǎn)擊[Import].
·
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
