如何使用 JavaScript 導(dǎo)入和導(dǎo)出 Exce

如何使用 JavaScript 導(dǎo)入和導(dǎo)出 Excel XLSX

言

在現(xiàn)代的Web應(yīng)用開發(fā)中，與Excel文件的導(dǎo)入和導(dǎo)出成為了一項常見而重要的任務(wù)。無論是數(shù)據(jù)交換、報告生成還是數(shù)據(jù)分析，與Excel文件的交互都扮演著至關(guān)重要的角色。

本文小編將為大家介紹如何在熟悉的電子表格 UI 中輕松導(dǎo)入 Excel 文件，并以編程方式修改表格或允許用戶進行編輯，最后使用葡萄城公司的純前端表格控件SpreadJS組件它們導(dǎo)出回 Excel 文件。

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

搭建 JavaScript 電子表格項目
編寫 Excel 導(dǎo)入代碼并導(dǎo)入 Excel
將數(shù)據(jù)添加到導(dǎo)入的 Excel 文件
為表格添加迷你圖
編寫 Excel 導(dǎo)出代碼并導(dǎo)出 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 導(dǎo)入代碼并導(dǎo)入 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() 方法來導(dǎo)入 Excel 文件。我們將在按鈕的點擊事件中導(dǎo)入用戶選擇的本地文件。

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

現(xiàn)在就可以在 JavaScript 電子表格組件中導(dǎo)入和查看 Excel (.xlsx) 文件了，如下所示：

3）將數(shù)據(jù)添加到導(dǎo)入的 Excel 文件

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

現(xiàn)在我們需要添加一個按鈕來將數(shù)據(jù)添加到導(dǎo)入的 Excel 文件中。

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

可以為該按鈕的點擊事件編寫一個函數(shù)來為表格添加一行并復(fù)制前一行的樣式，為接下來添加數(shù)據(jù)做準(zhǔn)備。要復(fù)制樣式，我們需要使用 copyTo() 函數(shù)并傳入：

起始和目標(biāo)行索引和列索引
復(fù)制的行數(shù)和列數(shù)
復(fù)制模式 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
  );
};

下面是用于添加數(shù)據(jù)和迷你圖的代碼。對于大多數(shù)數(shù)據(jù)，我們可以使用 setValue() 函數(shù)。這允許我們通過傳入行索引、列索引和值來設(shè)置 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 列中設(shè)置 SUM 公式以匹配其他行，并為 Q 列設(shè)置百分比：

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

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

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

4）為表格添加迷你圖

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

我們剛剛添加數(shù)據(jù)的單元格范圍
調(diào)整迷你圖的設(shè)置使其更加美觀

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

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

迷你圖的位置
數(shù)據(jù)的位置
迷你圖的方向
迷你圖的類型
之前創(chuàng)建的設(shè)置

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

如果現(xiàn)在嘗試運行代碼，它可能看起來有點慢，因為每次更改數(shù)據(jù)和添加樣式時工作簿都會重新繪制。為了大幅加快速度并提高性能，Spread.Sheets 提供了暫停繪制和計算的功能。讓我們添加代碼以在添加行及其數(shù)據(jù)之前暫停，然后在添加行及其數(shù)據(jù)之后恢復(fù)：

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

添加完該代碼后，我們可以在瀏覽器中打開該頁面，并看到 Excel 文件加載到 Spread.Sheets 中，并添加了收入行。

5）編寫 Excel 導(dǎo)出代碼并導(dǎo)出 Excel

最后，我們可以添加一個按鈕來導(dǎo)出包含了剛剛添加的收入行的文件。為了實現(xiàn)這個需求，我們可以在單擊事件處理程序的導(dǎo)出按鈕中調(diào)用 Spread.Sheets 中內(nèi)置的導(dǎo)出方法：

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 輸入元素獲取導(dǎo)出文件名。我們可以自定義它的文件名：

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

然后添加一個調(diào)用此函數(shù)的按鈕：

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

添加收入行后，使用導(dǎo)出文件按鈕導(dǎo)出文件。

文件成功導(dǎo)出后，在 Excel 中打開它，可以看到該文件看起來與導(dǎo)入時一樣，只是現(xiàn)在我們添加了一條額外的收入線。

總結(jié)

以上就是使用JavaScript 導(dǎo)入和導(dǎo)出 Excel的全過程，如果您想了解更多的信息，歡迎訪問葡萄城官網(wǎng)查看。

創(chuàng)作者：盧子轉(zhuǎn)自： Excel不加班

Excel除了自己錄入的數(shù)據(jù)外，還有一些是從系統(tǒng)或者網(wǎng)頁導(dǎo)入。

今天，盧子以東方財富網(wǎng)，招商銀行高管增持股票這個網(wǎng)址為例進行說明。

網(wǎng)址：

http://data.eastmoney.com/executive/600036.html

通常，需要這些數(shù)據(jù)，都是選擇區(qū)域，然后復(fù)制，粘貼到Excel。

這里分享一個新方法。

Step 01 點數(shù)據(jù)，自網(wǎng)站，將網(wǎng)址粘貼進去，確定。

Step 02 選擇Table 0，點轉(zhuǎn)換數(shù)據(jù)，進入PQ編輯器。

說明，有的網(wǎng)頁有很多個Table，這個可以根據(jù)自己的需求選擇。

Step 03 可以進行處理，不處理也行，直接關(guān)閉并上載。

以上純屬技術(shù)交流，不構(gòu)成投資建議，股市有風(fēng)險。

家的在工作和學(xué)習(xí)中經(jīng)常會大量用到Word、Excel，Excel表格經(jīng)常用于數(shù)據(jù)統(tǒng)計，這期給大家講解一下網(wǎng)頁中的表格如何導(dǎo)入到Excel表格里，下面快來和小編一起學(xué)習(xí)吧！

首先，把需要導(dǎo)入的網(wǎng)頁的鏈接復(fù)制一下（注：小編選擇的是“HTML 特殊符號編碼對照表”進行的數(shù)據(jù)導(dǎo)入操作，大家可以根據(jù)自己的需要去粘貼復(fù)制要導(dǎo)入的數(shù)據(jù)的鏈接。），在新建的Excel表格里點擊空白處找到“數(shù)據(jù)”→“新建查詢”即可；（注：“新建查詢”在WPS Office無此功能）如圖所示：

在菜單欄中點擊“新建查詢”按鈕，在下拉欄中選擇并點擊“從其他源(O)”→“從Web(W)”即可；如圖所示：

在彈出的“從Web”界面中，將想要導(dǎo)入的表格鏈接輸入到“URL”下的文本框中，確認無誤后點擊“確定”即可；如圖所示：

在彈出的“導(dǎo)航器”界面中，選擇“HTML 特殊符號編碼對照表”點擊下方的“加載”即可；如圖所示：

以上是如何將網(wǎng)頁內(nèi)的表格導(dǎo)入到Excel里的操作步驟及全部講解的過程，完成后的效果圖如下圖所示。希望這期的經(jīng)驗?zāi)軐Υ蠹矣兴鶐椭∥沂茾僾伱驟記得關(guān)注我給小編我點贊哦！！！

在線咨詢

上一篇：網(wǎng)頁設(shè)計和開發(fā)的55個頂尖博客
下一篇：HTML5動畫原理和HTML5動畫制作工具