websheet 之 HTML使用入门
一、 加载必要文件
1.1 JS加载
<script type="text/javascript" src="./dist/websheet.umd.js"></script>
1.2 CSS样式加载
<link rel="stylesheet" href="./dist/style.css">
二、定义需要渲染的div
<div id='yourElement'>
三、渲染websheet组件
function load(){let yourElement=document.getElementById("yourElement");let wsheet=new websheet('HTML',yourElement);
}
在html加载完成后，定义调用的功能函数，在这里我们定义load()函数。
websheet展示工具类，只需要两个参数就可以完成页面渲染
到此页面展示如下：
{.is-success}
加载完成后就可以右击菜单选择浏览本地的EXCEL的XLSX文件。
提升：下文为从网络异步加载文件
{.is-warning}
四、异步从网站获取文件
var oReq = new XMLHttpRequest();oReq.open("GET", "/files/1.xlsx", true); //文件获取路径oReq.responseType = "arraybuffer";oReq.onload = function (oEvent) {var arrayBuffer = oReq.response;var blob = new Blob([arrayBuffer]);wsheet.loadFromBlob(blob);};oReq.send();
文件加载完成，绑定方法可以参考：
wsheet.$on("DocumentChange", function () {activeSheet = wsheet.ActiveSheet();activeSheet.SetCellValue(2, 1, '3435354.34');console.log("DocumentChange:")
});这里需要重新获取获得的activeSheet,原初始化的activeSheet失效。
{.is-warning}
五、完整demo
网址
完整的代码
<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>六、控件展示大小
本控件默认的大小为width = 1400, height = 700。可以在初始化的时候设置大小，代码如下
let wsheet = new websheet('HTML', yourElement, 0, 0, document.documentElement.clientWidth * 0.95, 400);同时也可以在运行时重新制定大小，代码如下
wsheet.ReSetSize(1500,1500);