SpreadJS是一款基于HTML5的純JavaScript電子表格和網(wǎng)格功能控件，以“高速低耗、純前端、零依賴”為產(chǎn)品特色，可嵌入任何操作系統(tǒng)，同時滿足.NET、Java、響應(yīng)式Web應(yīng)用及移動跨平臺的表格數(shù)據(jù)處理和類Excel的表格應(yīng)用開發(fā)，為終端用戶帶來親切的Excel體驗。SpreadJS在數(shù)據(jù)展示、前端導(dǎo)入導(dǎo)出、圖表面板、數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險。

點(diǎn)擊下載SpreadJS最新版

與此同時，SpreadJS桌面設(shè)計器的在線版本SpreadJS在線表格編輯器已正式推出，這是一款在功能、外觀和操作上都與Excel高度類似的在線表格編輯程序，更開放的 API和更簡單的拖拽操作方式，幫助用戶更高效進(jìn)行表單設(shè)計和填報，從而助力企業(yè)輕松處理海量表格數(shù)據(jù)。

本篇教程將向您展示如何借助SpreadJS在JavaScript中輕松實現(xiàn)導(dǎo)入和導(dǎo)出Excel文件的操作，以及將SpreadJS組件添加到HTML頁面是多么的容易。（由于篇幅過長，本教程分為上、下兩篇，有關(guān)本教程更多內(nèi)容，請點(diǎn)擊前往查閱>>>）

將數(shù)據(jù)添加到Excel文件

在本教程中，我們以導(dǎo)入一個名為“Profit loss statement”的Excel模板為例。

△ Excel模板

現(xiàn)在我們可以使用Spread.Sheets腳本在此文件中添加另一個收入行。讓我們在頁面上添加一個按鈕來執(zhí)行此操作：

<button id="addRevenue">Add Revenue</button>

我們可以為該按鈕的click事件綁定一個函數(shù)，用以執(zhí)行添加行并復(fù)制上一行的樣式。要復(fù)制樣式，我們需要使用copyTo函數(shù)并傳入：

• 原點(diǎn)和目標(biāo)行和列索引；

• 行數(shù)和列數(shù)；

• 樣式的CopyToOptions值。

document.getElementById("addRevenue").onclick = function () {  
    var sheet = workbook.getActiveSheet();  
    sheet.addRows(11, 1);  
    sheet.copyTo(10, 1, 11, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);  
}

用于添加數(shù)據(jù)和Sparkline的所有以下腳本代碼都將包含在此按鈕單擊事件處理程序中。對于大多數(shù)數(shù)據(jù)，我們可以使用setValue函數(shù)。這允許我們通過傳入行索引、列索引和值在Spread中的工作表上設(shè)置值：

sheet.setValue(11, 1, "Revenue 8");  

for (var c = 3; c < 15; c++) {  
    sheet.setValue(11, c, Math.floor(Math.random() * 200) + 10);  
}

在P列中設(shè)置SUM公式以匹配其他行，并為Q列設(shè)置百分比：

sheet.setFormula(11, 15, "=SUM([@[Jan]:[Dec]])")  
sheet.setValue(11, 16, 0.15);

最后，我們可以再次使用copyTo函數(shù)將前一行中的公式復(fù)制到R到AD列的新行，這次使用CopyToOptions.formula：

.copyTo(10, 17, 11, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);

添加迷你圖

現(xiàn)在我們可以添加一個迷你圖來匹配其他數(shù)據(jù)行。要做到這一點(diǎn)，我們需要提供一系列單元格來獲取數(shù)據(jù)和一些迷你圖設(shè)置。在這種情況下，我們可以指定：

• 我們剛剛添加數(shù)據(jù)的單元格范圍；

• 設(shè)置使迷你圖看起來像同一列中的其他迷你圖。

var data = new GC.Spread.Sheets.Range(11, 3, 1, 12);  
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();  
setting.options.seriesColor = "Text 2";  
setting.options.lineWeight = 1;  
setting.options.showLow = true;  
setting.options.showHigh = true;  
setting.options.lowMarkerColor = "Text 2";  
setting.options.highMarkerColor = "Text 1";

然后，我們調(diào)用setSparkline方法并指定：

• 迷你圖的位置

• 數(shù)據(jù)的位置

• 迷你圖的方向

• 迷你圖的類型

• 我們創(chuàng)建的設(shè)置

.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);

如果您現(xiàn)在嘗試運(yùn)行代碼，可能會很慢，這是因為每次更改數(shù)據(jù)和添加樣式時工作簿都會重新繪制。為了大幅提升速度和性能，Spread.Sheets提供了暫停繪畫和計算服務(wù)的功能。讓我們通過代碼在添加行和數(shù)據(jù)之前暫停兩者，并在完成數(shù)據(jù)加載后恢復(fù)：

workbook.suspendPaint();  
workbook.suspendCalcService();  
//...  
workbook.resumeCalcService();  
workbook.resumePaint();

在添加該代碼后，我們可以在Web瀏覽器中打開頁面，并將Excel文件加載到Spread.Sheets中，并實現(xiàn)添加行的功能。

重要提示：請注意，Chrome出于安全目的不允許您打開本地文件，因此您需要使用Firefox等網(wǎng)絡(luò)瀏覽器才能成功運(yùn)行此代碼。當(dāng)然，如果您從網(wǎng)站URL加載文件時，在任何瀏覽器中都可以打開。

△ 用SpreadJS 在網(wǎng)頁上實現(xiàn)的Excel模板

△ 帶有用于添加收入行按鈕的Excel模板

添加Excel導(dǎo)出代碼

我們還可以實現(xiàn)：在網(wǎng)頁中將帶有添加行功能的Spread.Sheets 導(dǎo)出成Excel文件。在這里，我們使用Spread.Sheets中內(nèi)置的客戶端ExcelIO代碼：

function ExportFile() {  
    var fileName = $("#exportFileName").val();  
    if (fileName.substr(-5, 5) !== '.xlsx') {  
        fileName += '.xlsx';  
    }  
    var json = JSON.stringify(workbook.toJSON());  

    excelIO.save(json, function (blob) {  
        saveAs(blob, fileName);  
    }, function (e) {  
        if (e.errorCode === 1) {  
            ale rt(e.errorMessage);  
        }  
    });  
}

該代碼從exportFileName的輸入元素中直接獲取導(dǎo)出的文件名。我們可以定義它并讓用戶以這樣的方式命名文件：

<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />

在這里，我們繼續(xù)為調(diào)用此函數(shù)添加一個按鈕：

<button id="export">Export File</button>  
document.getElementById("export").onclick = function () {  
    ExportFile();  
}

△ 導(dǎo)入和編輯Excel文件后完成的頁面

在實現(xiàn)添加行功能后，可以使用“導(dǎo)出文件”的按鈕導(dǎo)出Excel。請確保添加FileSaver外部庫，以便用戶將文件保存到他們本地：

<script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

成功導(dǎo)出文件后，您可以使用Excel打開它，這時你會發(fā)現(xiàn)，在Excel中打開的模板除了之前導(dǎo)入的內(nèi)容外，還增加了新的“收入行”。

導(dǎo)出的文件在Excel中加載

通過這個示例，向您展示了如何使用SpreadJS純前端表格控件，將Excel數(shù)據(jù)導(dǎo)入到網(wǎng)頁中，在網(wǎng)頁進(jìn)行數(shù)據(jù)更新后，又通過簡單的幾行JavaScript代碼將它們重新導(dǎo)出成Excel 文件。看完本教程后，您可以下載Demo示例體驗以下。

• SpreadJS—ExcelIO示例

想要獲得 SpreadJS 更多資源或其他相關(guān)下載的朋友，請點(diǎn)擊這里。

想要購買正版 SpreadJS 產(chǎn)品的朋友，請。

有關(guān)慧都科技更多的精彩內(nèi)容，請關(guān)注下方的微信公眾號↓↓↓