# 前端必讀：如何在 JavaScript 中使用 SpreadJS 匯入和匯出 Excel 檔案

最近我從cnaaa.com購買了雲伺服器。

JavaScript 在前端領域佔據著絕對的統治地位，目前更是從瀏覽器到服務端，移動端，嵌入式，幾乎所有的所有的應用領域都可以使用它。技術圈有一句很經典的話 “凡是能用 JavaScript 實現的東西，最後都會用 JavaScript 實現”。 Excel 電子表格自 1980 年代以來一直為各行業所廣泛使用，至今已擁有超過 3 億使用者，大多數人都熟悉 Excel 電子表格體驗。許多企業在其業務的各個環節中使用了 Excel 電子表格進行資料管理。

1. 設定 JavaScript 電子表格專案
2. 新增 Excel 匯入程式碼
3. 將資料新增到匯入的 Excel 檔案
4. 新增迷你圖
5. 新增 Excel 匯出程式碼

![img](https://pic.imgdb.cn/item/632c041416f2c2beb1135b3d.png)

### 設定 JavaScript 電子表格專案

首先，我們可以使用託管在 NPM 上的 SpreadJS 檔案。為此，我們可以使用命令列引數進行安裝。開啟命令提示符並導航到應用程式的位置。在那裡，您可以使用一個命令安裝所需的檔案。

在這種情況下，我們需要基本的 Spread-Sheets 庫、Spread-ExcelIO 和 jQuery：

```
npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery
```

SpreadJS 不依賴於 jQuery，但在這種情況下，我們使用它來提供簡單的跨域請求支援，稍後我們將對其進行回顧。

一旦安裝了這些，我們就可以在我們的程式碼中新增對這些指令碼和 CSS 檔案的引用：

```
  
  
  
    <title>SpreadJS ExcelIO</title>
    <div></div>
    <div></div>

<div id="ss" style="height:600px; width :100%; "></div>  
  
  
```

除了 SpreadJS 和 jQuery 檔案之外，我們還需要匯入 FileSaver 庫，為了便於後續程式處理，SpreadJS 預設提供完整的檔案流，FileSaver 庫可以用來把檔案流轉成檔案下載到本地。

然後我們可以在頁面中新增一個指令碼來初始化 Spread.Sheets 元件和一個 div 元素來包含它（因為 SpreadJS 電子表格元件使用了一個畫布，這是初始化元件所必需的）：

```
    <div id="ss" style="height:600px ; width :100%; "></div>

```

### 新增 Excel 匯入程式碼

我們需要建立一個客戶端 ExcelIO 元件的例項，我們可以使用它來開啟檔案：

```
var excelIO = new GC.Spread.Excel.IO();
```

然後我們需要新增一個函式來匯入檔案。在此示例中，我們匯入了一個本地檔案，但您可以對伺服器上的檔案執行相同的操作。如果從伺服器匯入檔案，您需要引用該位置。下面是一個輸入元素的示例，使用者可以在其中輸入檔案的位置：

```
<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px">
```

一旦你有了它，你可以直接在指令碼程式碼中訪問該值：

```
var excelUrl = $("#importUrl").val();
```

匯入函式的以下程式碼使用 “excelUrl” 變數的本地檔案：

```
function ImportFile() {  
    var excelUrl = "./test.xlsx";

workbook.setActiveSheet("Revenues (Sales)");  
}  
```

無論您是在伺服器上還是在本地引用檔案，都需要在 $(document).ready 函式內的指令碼中新增以下內容：

```
$(document).ready(function () {  
    $.support.cors = true;  
    workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
    //...  
});  
```

在這種情況下，我們需要啟用 Cross-Origin-Request-Support，因為我們可能會從 URL 載入檔案。因此 $.support.cors = true; 行，否則嘗試載入它會導致 CORS 錯誤。

### 將資料新增到匯入的 Excel 檔案

我們使用本教程的 “損益表” Excel 模板匯入本地檔案。

![img](https://pic.imgdb.cn/item/632c041416f2c2beb1135b43.png)

現在我們可以使用 Spread.Sheets 指令碼在這個檔案中新增另一個收入行。讓我們在頁面上新增一個按鈕來執行此操作： <button id="addRevenue">Add Revenue</button>

我們可以為該按鈕的單擊事件處理程式編寫一個函式來新增一行並從前一行復制樣式以準備新增一些資料。要複製樣式，我們需要使用 copyTo 函式並傳入：

1. 原始和目標行和列索引
2. 行數和列數
3. 樣式的 CopyToOptions 值

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

以下用於新增資料和 Sparkline 的指令碼程式碼將包含在此按鈕單擊事件處理程式中。對於大部分資料，我們可以使用 setValue 函式。這允許我們透過傳入行索引、列索引和值來在 Spread 中的工作表中設定值：

```
sheet.setValue(newRowIndex, 1, "Revenue 8");  
for (var c = 3; c < 15; c++) {  
    sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);  
}  
```

最後，我們可以再次使用 copyTo 函式將先前行中的公式複製到 R 到 AD 列的新行，這次使用 CopyToOptions.formula：

```
sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);  
```

### 新增迷你圖

現在，我們可以新增迷你圖來匹配其他資料行。為此，我們需要提供一系列單元格以從中獲取資料以及迷你圖的一些設定。在這種情況下，我們可以指定：

1. 單元格的範圍，我們只是將資料新增到
2. 使迷你圖看起來像同一列中的其他迷你圖的設定

```
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 方法並指定：

1. 迷你圖的位置
2. 資料的位置
3. 迷你圖的方向
4. 迷你圖的型別
5. 我們建立的設定

```
sheet.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 載入檔案應該可以在任何瀏覽器中正常開啟。

![img](https://pic.imgdb.cn/item/632c041416f2c2beb1135b51.png)

### 新增 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) {  
            alert(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();  
}  
```

![img](https://pic.imgdb.cn/item/632c041416f2c2beb1135b5c.png)

新增收入行後，您可以使用 “匯出檔案” 按鈕匯出檔案。確保新增 FileSaver 外部庫以允許使用者將檔案儲存在他們想要的位置：

```
<div></div>  
```

成功匯出檔案後，您可以在 Excel 中開啟它，並檢視檔案與匯入時的外觀相同，只是現在我們新增了額外的收入行。

![img](https://pic.imgdb.cn/item/632c041416f2c2beb1135b75.png)

這只是一個示例，說明如何使用 SpreadJS JavaScript 電子表格將資料新增到 Excel 檔案，然後使用簡單的 JavaScript 程式碼將它們匯出回 Excel。

前端必讀：如何在 JavaScript 中使用 SpreadJS 匯入和匯出 Excel 檔案

相關文章