¶ 1. Loading Required Files
¶ 1.1 JS Loading
<script type="text/javascript" src="./dist/websheet.umd.js"></script>
¶ 1.2 CSS Loading
<link rel="stylesheet" href="./dist/style.css">
¶ 2. Defining the Rendering Div
<div id='yourElement'>
¶ 3. Rendering the Websheet Component
function load(){
let yourElement=document.getElementById("yourElement");
let wsheet=new websheet('HTML',yourElement);
}
After the HTML loads, define the calling function. Here we define the load() function.
The websheet display utility class only requires two parameters to complete page rendering.
At this point, the page display is as follows:
After loading is complete, you can right-click the menu to browse local EXCEL XLSX files.
Tip: The following demonstrates loading files asynchronously from the web
¶ 4. Asynchronously Loading Files from Website
var oReq = new XMLHttpRequest();
oReq.open("GET", "/files/1.xlsx", true); //File fetch path
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response;
var blob = new Blob([arrayBuffer]);
wsheet.loadFromBlob(blob);
};
oReq.send();
After file loading completes, the binding method can be referenced as:
wsheet.$on("DocumentChange", function () {
activeSheet = wsheet.ActiveSheet();
activeSheet.SetCellValue(2, 1, '3435354.34');
console.log("DocumentChange:")
});
Note: You need to reacquire the activeSheet here - the originally initialized activeSheet becomes invalid.
¶ 5. Complete Demo
Complete code:
<html lang="en"><head>
<meta charset="UTF-8">
<title>webSheet</title>
<link rel="stylesheet" href="./dist/style.css">
</head>
<body>
<div id="yourElement">
<script type="module">
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
</script>
<script type="text/javascript" src="./dist/websheet.umd.js"></script>
</body>
</html>
¶ 6. Control Display Size
The default size of this control is width = 1400, height = 700. You can set the size during initialization with the following code:
let wsheet = new websheet('HTML', yourElement, 0, 0, document.documentElement.clientWidth * 0.95, 400);
You can also resize it during runtime with the following code:
wsheet.ReSetSize(1500,1500);