如何使用 JavaScript 匯入和匯出 Excel

葡萄城技术团队發表於2024-03-26
JavaScriptExcel

前言

在現代的Web應用開發中，與Excel檔案的匯入和匯出成為了一項常見而重要的任務。無論是資料交換、報告生成還是資料分析，與Excel檔案的互動都扮演著至關重要的角色。本文小編將為大家介紹如何在熟悉的電子表格 UI 中輕鬆匯入 Excel 檔案，並以程式設計方式修改表格或允許使用者進行編輯，最後使用葡萄城公司的純前端表格控制元件SpreadJS元件它們匯出回 Excel 檔案。

我們將按照以下步驟介紹如何在 JavaScript 中匯入/匯出到 Excel：

  1. 搭建 JavaScript 電子表格專案
  2. 編寫 Excel 匯入程式碼並匯入 Excel
  3. 將資料新增到匯入的 Excel 檔案
  4. 為表格新增迷你圖
  5. 編寫 Excel 匯出程式碼並匯出 Excel

操作步驟

1）搭建 JavaScript 電子表格專案

首先，我們可以使用 NPM 來下載 SpreadJS 檔案。可以使用以下的命令列來安裝 SpreadJS：

npm i @grapecity-software/spread-sheets @grapecity-software/spread-sheets-io file-saver jquery

安裝完之後，我們可以在一個簡單的 HTML 檔案中新增對這些指令碼和 CSS 檔案的引用，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>SpreadJS Import and Export Xlsx</title>
    <script
      src="./node_modules/jquery/dist/jquery.min.js"
      type="text/javascript"
    ></script>
    <script
      src="./node_modules/file-saver/src/FileSaver.js"
      type="text/javascript"
    ></script>
    <link
      href="./node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      type="text/javascript"
      src="./node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js"
    ></script>
  </head>
  <body>
    <div id="ss" style="height:600px; width :100%; "></div>
  </body>
</html>

然後我們可以在頁面中新增一個指令碼來初始化 SpreadJS Workbook 元件和一個 div 元素來作為容器：

    <script type="text/javascript">
        $(document).ready(function () {
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        });
    </script>
</head>
<body>
    <div id="ss" style="height:600px ; width :100%; "></div>
</body>

2）編寫 Excel 匯入程式碼並匯入 Excel

我們需要新增一個 input 元素和一個 button 來選擇 Excel 檔案。

<body>
  <div id="ss" style="height:700px; width:100%;"></div>
  <input type="file" id="selectedFile" name="files[]" accept=".xlsx" />
  <button class="settingButton" id="open">Open</button>
</body>

然後我們需要使用 spread.import() 方法來匯入 Excel 檔案。我們將在按鈕的點選事件中匯入使用者選擇的本地檔案。

document.getElementById("open").onclick = function () {
  var file = document.querySelector("#selectedFile").files[0];
  if (!file) {
    return;
  }
  workbook.import(file);
};

現在就可以在 JavaScript 電子表格元件中匯入和檢視 Excel (.xlsx) 檔案了，如下所示：

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

在這裡，我們將使用 利潤損失表.xlsx 作為模板，如下圖所示：

現在我們需要新增一個按鈕來將資料新增到匯入的 Excel 檔案中。

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

可以為該按鈕的點選事件編寫一個函式來為表格新增一行並複製前一行的樣式，為接下來新增資料做準備。要複製樣式，我們需要使用 copyTo() 函式並傳入：

  • 起始和目標行索引和列索引
  • 複製的行數和列數
  • 複製模式 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
  );
};

下面是用於新增資料和迷你圖的程式碼。對於大多數資料，我們可以使用 setValue() 函式。這允許我們透過傳入行索引、列索引和值來設定 Spread 中工作表中的值：

var cellText = "Revenue" + revenueCount++;
sheet.setValue(newRowIndex, 1, cellText);

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

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

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

最後，我們可以再次使用 copyTo() 函式將 R 列到 AD 列的公式從前一行復制到新行，這次使用 CopyToOptions.formula（只複製公式）：

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

4）為表格新增迷你圖

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

  • 我們剛剛新增資料的單元格範圍
  • 調整迷你圖的設定使其更加美觀
var data = new GC.Spread.Sheets.Range(newRowIndex, 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() 方法並指定：

  • 迷你圖的位置
  • 資料的位置
  • 迷你圖的方向
  • 迷你圖的型別
  • 之前建立的設定
sheet.setSparkline(
  newRowIndex,
  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();

新增完該程式碼後，我們可以在瀏覽器中開啟該頁面，並看到 Excel 檔案載入到 Spread.Sheets 中，並新增了收入行。

5）編寫 Excel 匯出程式碼並匯出 Excel

最後，我們可以新增一個按鈕來匯出包含了剛剛新增的收入行的檔案。為了實現這個需求，我們可以在單擊事件處理程式的匯出按鈕中呼叫 Spread.Sheets 中內建的匯出方法：

document.getElementById("export").onclick = function () {
  var fileName = $("#exportFileName").val();
  if (fileName.substr(-5, 5) !== ".xlsx") {
    fileName += ".xlsx";
  }
  var json = JSON.stringify(workbook.toJSON());
  workbook.export(
    function (blob) {
      // save blob to a file
      saveAs(blob, fileName);
    },
    function (e) {
      console.log(e);
    },
    {
      fileType: GC.Spread.Sheets.FileType.excel,
    }
  );
};

該程式碼從 exportFileName 輸入元素獲取匯出檔名。我們可以自定義它的檔名：

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

然後新增一個呼叫此函式的按鈕：

<button id="export"Export File</button

新增收入行後，使用匯出檔案按鈕匯出檔案。

檔案成功匯出後，在 Excel 中開啟它，可以看到該檔案看起來與匯入時一樣，只是現在我們新增了一條額外的收入線。

總結

以上就是使用JavaScript 匯入和匯出 Excel的全過程，如果您想了解更多的資訊，歡迎點選這篇參考資料檢視。

擴充套件連結：

【乾貨放送】財務報表勾稽分析要點，一文讀盡！

為什麼你的財務報表不出色？推薦你瞭解這四個設計要點和！

純前端類 Excel 表格控制元件在報表勾稽分析領域的應用場景解析

相關文章