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

點擊下載SpreadJS最新版

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

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

將數據添加到Excel文件

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

△ Excel模板

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

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

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

• 原點和目標行和列索引；

• 行數和列數；

• 樣式的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);  
}

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

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

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

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

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

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

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

添加迷你圖

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

• 我們剛剛添加數據的單元格范圍；

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

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";

然后，我們調用setSparkline方法并指定：

• 迷你圖的位置

• 數據的位置

• 迷你圖的方向

• 迷你圖的類型

• 我們創建的設置

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

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

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

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

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

△ 用SpreadJS 在網頁上實現的Excel模板

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

添加Excel導出代碼

我們還可以實現：在網頁中將帶有添加行功能的Spread.Sheets 導出成Excel文件。在這里，我們使用Spread.Sheets中內置的客戶端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的輸入元素中直接獲取導出的文件名。我們可以定義它并讓用戶以這樣的方式命名文件：

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

在這里，我們繼續為調用此函數添加一個按鈕：

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

△ 導入和編輯Excel文件后完成的頁面

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

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

成功導出文件后，您可以使用Excel打開它，這時你會發現，在Excel中打開的模板除了之前導入的內容外，還增加了新的“收入行”。

導出的文件在Excel中加載

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

• SpreadJS—ExcelIO示例

想要獲得 SpreadJS 更多資源或其他相關下載的朋友，請點擊這里。

想要購買正版 SpreadJS 產品的朋友，請。

有關慧都科技更多的精彩內容，請關注下方的微信公眾號↓↓↓