如何使用 JavaScript 導入和導出 Excel

前言

在現代的Web應用開發中，與Excel文件的導入和導出成爲了一項常見而重要的任務。無論是數據交換、報告生成還是數據分析，與Excel文件的交互都扮演着至關重要的角色。本文小編將爲大家介紹如何在熟悉的電子表格 UI 中輕鬆導入 Excel 文件，並以編程方式修改表格或允許用戶進行編輯。

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

搭建 JavaScript 電子表格項目
編寫 Excel 導入代碼並導入 Excel
將數據添加到導入的 Excel 文件
爲表格添加迷你圖
編寫 Excel 導出代碼並導出 Excel

操作步驟

1）搭建 JavaScript 電子表格項目

首先，我們可以使用 NPM 來下載文件。可以使用以下的命令行來安裝：

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

安裝完之後，我們可以在一個簡單的 HTML 文件中添加對這些腳本和 CSS 文件的引用，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title> 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>

然後我們可以在頁面中添加一個腳本來初始化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 表格控件在報表勾稽分析領域的應用場景解析

如何使用 JavaScript 導入和導出 Excel

Golang爬蟲代理接入的技術與實踐

MySQL查出時間比實際晚8小時的解決方案

什麼是IPD項目管理模式？聊聊IPD下的產品研發流程

aaaaaa1

Java編程工具：簡潔高效實現

Java word通過html設置樣式（Spire Docx）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結