发布网友 发布时间:2022-04-23 11:13
共3个回答
热心网友 时间:2022-04-21 17:55
JavaScript is a versatile platform that allows easy customization of client-side scripting tools. In some applications, it's useful to have some sort of spreadsheet interface that is easy to code and maintain. The SpreadJS client-side JavaScript spreadsheet component, part of the SpreadJS package, is perfect for this.
A JavaScript export to Excel
You can import and export Excel files, and provide users with an interface to interact with those files -- all in pure JavaScript. In this tutorial, I'll show you how easy it is to add a SpreadJS component to an HTML page and import an Excel file into it.
Set Up the JavaScript Spreadsheet Project
Create a new HTML page and add references to the Spread.Sheets script and the CSS files that are included in your SpreadJS download:
<!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 href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.10.1.0.css" 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>
Then add a script to the page that initializes the Spread.Sheets component, and a div element to contain it (since the SpreadJS spreadsheet component utilizes a canvas, this is necessary to initialize the component):
<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>
Add Excel Import Code
We need to create an instance of the client-side ExcelIO component that we can use to actually open the file:
var excelIO = new GC.Spread.Excel.IO();
Then we need to add a function to import a file. In this example, we import a local file, but you can do the same thing with a file on a server. If you’re importing a file from a server, you need to reference the location. The following is an example of an input element where the user can enter the location of the file:
<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />
Once you have that, you can directly access that value in script code:
var excelUrl = $("#importUrl").val();
The following code for the import function just uses a local file for the "excelUrl" variable:
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)");
}
Regardless of whether you're referencing a file on a server or locally, you'll need to add the following to your script inside the $(document).ready function:
$(document).ready(function () {
$.support.cors = true;
workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//... });
你可以搜寻 黑体字 , 如果需要更详细的介绍
热心网友 时间:2022-04-21 19:13
你可以换一个js文件,不用min版本的试试,从excel里面获取数据,据我所知需要在后台解析吧,解析过后才可以对数据做操作热心网友 时间:2022-04-21 20:48
<script type="text/javascript">