websheet 之 HTML使用入门

最新推荐文章于 2025-04-30 06:01:22 发布

火柴盒zhang

最新推荐文章于 2025-04-30 06:01:22 发布

阅读量527

点赞数 4

分类专栏： websheet 文章标签： html 前端 websheet spreadsheet

本文链接：https://blog.csdn.net/likewindy/article/details/147513650

版权

websheet 专栏收录该内容

10 篇文章

订阅专栏

一、加载必要文件

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