日韩在线中文字幕,精品免费一区,尤物网站免费在线观看

JavaScript中如何導(dǎo)出/導(dǎo)入Excel文件？SpreadJS輕松搞定

轉(zhuǎn)帖|使用教程|編輯：龔雪|2021-04-19 09:50:21.020|閱讀 231 次

概述：本文將為大家介紹使用SpreadJS實(shí)現(xiàn)JavaScript中導(dǎo)入和導(dǎo)出Excel文件，SpreadJS v14.0正式發(fā)布，歡迎下載最新版體驗(yàn)！

JavaScript是一個(gè)涵蓋多種框架、直譯式、可以輕松自定義客戶端的腳本語(yǔ)言，在 Web 應(yīng)用程序中，更加易于編碼和維護(hù)。而Excel 作為一款深受用戶喜愛(ài)的電子表格工具，借助其直觀的界面、出色的計(jì)算性能和圖表工具，已經(jīng)成為數(shù)據(jù)統(tǒng)計(jì)領(lǐng)域不可或缺的軟件之一。

如果有一款產(chǎn)品，能夠?qū)⒍咄昝廊诤希瑢⒃谇岸吮砀駭?shù)據(jù)處理、數(shù)據(jù)填報(bào)、數(shù)據(jù)可視化、在線文檔等領(lǐng)域大放異彩。SpreadJS，正是這樣一款功能布局與Excel高度類似，無(wú)需大量代碼開發(fā)和測(cè)試即可實(shí)現(xiàn)數(shù)據(jù)展示、前端 Excel 導(dǎo)入導(dǎo)出、圖表面板、數(shù)據(jù)綁定等業(yè)務(wù)場(chǎng)景的純前端表格控件。

使用JavaScript實(shí)現(xiàn) Excel 的導(dǎo)入和導(dǎo)出

通過(guò)純JavaScript，您完全可以實(shí)現(xiàn)導(dǎo)入和導(dǎo)出Excel文件功能，并為最終用戶提供與這些文件進(jìn)行I/O交互的界面。在本篇教程中，我將向您展示如何借助SpreadJS，在JavaScript中輕松實(shí)現(xiàn)導(dǎo)入和導(dǎo)出Excel文件的操作，以及將SpreadJS組件添加到HTML頁(yè)面是多么的容易。

設(shè)置JavaScript的電子表格項(xiàng)目

創(chuàng)建一個(gè)新的HTML頁(yè)面并添加對(duì)SpreadJS下載包中Spread.Sheets腳本和CSS文件的引用：

<!DOCTYPE html> 
<html> 
<head> 
<title>SpreadJS ExcelIO</title>

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

<link  rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.10.1.0.min.js"></script> 
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.10.1.0.min.js"></script>

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

然后在初始化Spread.Sheets組件的頁(yè)面中添加一個(gè)腳本，并使用div元素來(lái)包含它（因?yàn)镾preadJS電子表格組件使用了Canvas 繪制界面，所以這是初始化組件所必需的一步）：

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

添加Excel導(dǎo)入代碼

我們需要?jiǎng)?chuàng)建一個(gè)客戶端ExcelIO組件的實(shí)例，并用它來(lái)實(shí)際打開 Excel 文件：

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

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

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

完成上述步驟后，您可以直接在腳本代碼中訪問(wèn)該值：

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

以下導(dǎo)入函數(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)"); 
}

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

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

將數(shù)據(jù)添加到Excel文件

在本教程中，我們以導(dǎo)入一個(gè)名為 “Profit loss statement” 的Excel模板為例。

現(xiàn)在我們可以使用Spread.Sheets腳本在此文件中添加另一個(gè)收入行。讓我們?cè)陧?yè)面上添加一個(gè)按鈕來(lái)執(zhí)行此操作：

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

我們可以為該按鈕的click事件綁定一個(gè)函數(shù)，用以執(zhí)行添加行并復(fù)制上一行的樣式。要復(fù)制樣式，我們需要使用copyTo函數(shù)并傳入：

原點(diǎn)和目標(biāo)行和列索引
行數(shù)和列數(shù)
樣式的CopyToOptions值

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

用于添加數(shù)據(jù)和Sparkline的所有以下腳本代碼都將包含在此按鈕單擊事件處理程序中。對(duì)于大多數(shù)數(shù)據(jù)，我們可以使用setValue函數(shù)。這允許我們通過(guò)傳入行索引、列索引和值在Spread中的工作表上設(shè)置值：

sheet.setValue(11, 1, "Revenue 8");

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

在P列中設(shè)置SUM公式以匹配其他行，并為Q列設(shè)置百分比：

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

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

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

添加迷你圖

現(xiàn)在我們可以添加一個(gè)迷你圖來(lái)匹配其他數(shù)據(jù)行。要做到這一點(diǎn)，我們需要提供一系列單元格來(lái)獲取數(shù)據(jù)和一些迷你圖設(shè)置。在這種情況下，我們可以指定：

我們剛剛添加數(shù)據(jù)的單元格范圍
設(shè)置使迷你圖看起來(lái)像同一列中的其他迷你圖

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

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

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

如果您現(xiàn)在嘗試運(yùn)行代碼，可能會(huì)很慢，這是因?yàn)槊看胃臄?shù)據(jù)和添加樣式時(shí)工作簿都會(huì)重新繪制。為了大幅提升速度和性能，Spread.Sheets提供了暫停繪畫和計(jì)算服務(wù)的功能。讓我們通過(guò)代碼在添加行和數(shù)據(jù)之前暫停兩者，并在完成數(shù)據(jù)加載后恢復(fù)：

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

在添加該代碼后，我們可以在Web瀏覽器中打開頁(yè)面，并將Excel文件加載到Spread.Sheets中，并實(shí)現(xiàn)添加行的功能。

重要提示：請(qǐng)注意，Chrome出于安全目的不允許您打開本地文件，因此您需要使用Firefox等網(wǎng)絡(luò)瀏覽器才能成功運(yùn)行此代碼。當(dāng)然，如果您從網(wǎng)站URL加載文件時(shí)，在任何瀏覽器中都可以打開。

添加Excel導(dǎo)出代碼

我們還可以實(shí)現(xiàn)：在網(wǎng)頁(yè)中將帶有添加行功能的Spread.Sheets 導(dǎo)出成Excel文件。在這里，我們使用Spread.Sheets中內(nèi)置的客戶端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的輸入元素中直接獲取導(dǎo)出的文件名。我們可以定義它并讓用戶以這樣的方式命名文件：

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

在這里，我們繼續(xù)為調(diào)用此函數(shù)添加一個(gè)按鈕：

<button id="export">Export File</button> 
document.getElementById("export").onclick = function () { 
ExportFile(); 
}

在實(shí)現(xiàn)添加行功能后，可以使用“導(dǎo)出文件”的按鈕導(dǎo)出Excel。請(qǐng)確保添加FileSaver外部庫(kù)，以便用戶將文件保存到他們本地：

<script src="http://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

成功導(dǎo)出文件后，您可以使用Excel打開它，這時(shí)你會(huì)發(fā)現(xiàn)，在Excel中打開的模板除了之前導(dǎo)入的內(nèi)容外，還增加了新的“收入行”。

通過(guò)這個(gè)示例，向您展示了如何使用SpreadJS 純前端表格控件，將Excel數(shù)據(jù)導(dǎo)入到網(wǎng)頁(yè)中，在網(wǎng)頁(yè)進(jìn)行數(shù)據(jù)更新后，又通過(guò)簡(jiǎn)單的幾行JavaScript代碼將它們重新導(dǎo)出成Excel 文件。

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、蘇寧易購(gòu)、天弘基金等行業(yè)龍頭企業(yè)的青睞，并被中國(guó)軟件行業(yè)協(xié)會(huì)認(rèn)定為“中國(guó)優(yōu)秀軟件產(chǎn)品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協(xié)同編輯、數(shù)據(jù)填報(bào)、類 Excel 報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景需求，極大的降低企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

本文轉(zhuǎn)載自

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：DevExpress使用教程：手把手教你創(chuàng)建Blazor Dashboard應(yīng)用下一篇：VS2019/MFC編程入門：標(biāo)簽控件Tab Control 上