全彩无遮挡全彩口工全彩h,国产精品www久久,AV片在线播放,国产呦交精品免费视频,国产精品免费看久久久,国产精品亚洲第一视频,五月天亚洲综合中文国产,俺去了俺来也在色线播放,好紧夹得好爽太舒服了视频 ,jizzyou中国少妇高潮

前端必讀：如何在 JavaScript 中使用SpreadJS導入和導出 Excel 文件

admin

2023年5月25日 10:43 本文熱度 600

Javascript在前端領(lǐng)域占據(jù)著絕對的統(tǒng)治地位，目前更是從瀏覽器到服務端，移動端，嵌入式，幾乎所有的所有的應用領(lǐng)域都可以使用它。技術(shù)圈有一句很經(jīng)典的話“凡是能用Javascript實現(xiàn)的東西，最后都會用Javascript實現(xiàn)”。

Excel 電子表格自 1980 年代以來一直為各行業(yè)所廣泛使用，至今已擁有超過3億用戶，大多數(shù)人都熟悉 Excel 電子表格體驗。許多企業(yè)在其業(yè)務的各個環(huán)節(jié)中使用了 Excel 電子表格進行數(shù)據(jù)管理。

在本文中，我們將介紹如何按照以下步驟在 Javascript 中，實現(xiàn)頁面端電子表格導入/導出到 Excel：

完整Demo示例請點擊此處下載：如何使用Javascript導入和導出Excel文件Demo.zip

1、設置 Javascript 電子表格項目

2、添加 Excel 導入代碼

3、將數(shù)據(jù)添加到導入的 Excel 文件

4、添加迷你圖

5、添加 Excel 導出代碼

1、設置 Javascript 電子表格項目

首先，我們可以使用托管在 NPM 上的 SpreadJS 文件。為此，我們可以使用命令行參數(shù)進行安裝。打開命令提示符并導航到應用程序的位置。在那里，您可以使用一個命令安裝所需的文件。

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

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

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

一旦安裝了這些，我們就可以在我們的代碼中添加對這些腳本和 CSS 文件的引用：

<!DOCTYPE html>

<html>

<head>

<title>SpreadJS ExcelIO</title>

</head>

<body>

</body>

</html>

除了 SpreadJS 和 jQuery 文件之外，我們還需要導入 FileSaver 庫，為了便于后續(xù)程序處理，SpreadJS默認提供完整的文件流，F(xiàn)ileSaver庫可以用來把文件流轉(zhuǎn)成文件下載到本地。

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

$(document).ready(function () {

var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

});

</script>

</head>

<body>

</body>

2、添加 Excel 導入代碼

我們需要創(chuàng)建一個客戶端 ExcelIO 組件的實例，我們可以使用它來打開文件：

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

然后我們需要添加一個函數(shù)來導入文件。在此示例中，我們導入了一個本地文件，但您可以對服務器上的文件執(zhí)行相同的操作。如果從服務器導入文件，您需要引用該位置。下面是一個輸入元素的示例，用戶可以在其中輸入文件的位置：

一旦你有了它，你可以直接在腳本代碼中訪問該值：

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

導入函數(shù)的以下代碼使用“excelUrl”變量的本地文件：

function ImportFile() {

var excelUrl = "./test.xlsx";

var oReq = new XMLHttpRequest();

oReq.open('get', excelUrl, true);

oReq.responseType = 'blob';

oReq.onload = function () {

var blob = oReq.response;

excelIO.open(blob, LoadSpread, function (message) {

console.log(message);

});

};

oReq.send(null);

}

function LoadSpread(json) {

jsonData = json;

workbook.fromJSON(json);

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

}

無論您是在服務器上還是在本地引用文件，都需要在 $(document).ready 函數(shù)內(nèi)的腳本中添加以下內(nèi)容：

$(document).ready(function () {

$.support.cors = true;

workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

//...

});

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

3、將數(shù)據(jù)添加到導入的 Excel 文件

我們使用本教程的“損益表”Excel 模板導入本地文件。

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

Add Revenue

我們可以為該按鈕的單擊事件處理程序編寫一個函數(shù)來添加一行并從前一行復制樣式以準備添加一些數(shù)據(jù)。要復制樣式，我們需要使用 copyTo 函數(shù)并傳入：

1、原始和目標行和列索引

2、行數(shù)和列數(shù)

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

}

以下用于添加數(shù)據(jù)和 Sparkline 的腳本代碼將包含在此按鈕單擊事件處理程序中。對于大部分數(shù)據(jù)，我們可以使用 setValue 函數(shù)。這允許我們通過傳入行索引、列索引和值來在 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 函數(shù)將先前行中的公式復制到 R 到 AD 列的新行，這次使用 CopyToOptions.formula：

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

4、添加迷你圖

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

1、單元格的范圍，我們只是將數(shù)據(jù)添加到

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

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

1、迷你圖的位置

2、數(shù)據(jù)的位置

3、迷你圖的方向

4、迷你圖的類型

5、我們創(chuàng)建的設置

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

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

workbook.suspendPaint();

workbook.suspendCalcService();

//...

workbook.resumeCalcService();

workbook.resumePaint();

添加該代碼后，我們可以在 Web 瀏覽器中打開該頁面，并查看 Excel 文件加載到 Spread.Sheets 中并添加了收入行。重要提示：請記住，出于安全考慮，Chrome 不允許您打開本地文件，因此您需要使用 Firefox 等網(wǎng)絡瀏覽器才能成功運行此代碼?；蛘?，從網(wǎng)站 URL 加載文件應該可以在任何瀏覽器中正常打開。