Web：探索 SpreadJS强大的在线电子表格库

清疚 2024-04-20 12:11 13阅读 0赞

#### 1、概述 ####

SpreadJS 是葡萄城结合 40 余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件，基于 HTML5，兼容 450 多种 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，SpreadJS 在界面和功能上与 Excel 高度类似，但又不局限于 Excel，而是为企业信息化系统提供 表格文档协同编辑、 数据填报 和 类 Excel 报表设计 的应用场景支持，极大降低了企业研发成本和项目交付风险。

使用 SpreadJS 的在线表格编辑器，可直接在 Angular、 React、 Vue 等前端框架中实现高效的模板设计、在线编辑和数据绑定等功能，为最终用户提供高度类似 Excel 的使用体验。  
在线地址：[https://demo.grapecity.com.cn/spreadjs/help/docs/overview][https_demo.grapecity.com.cn_spreadjs_help_docs_overview]  
![在这里插入图片描述][4286acb03cc042d7bf1637774afeb827.png]

#### 2、导入 ####

创建一个HTML文件，包括一个用于容纳电子表格的div元素：

<!DOCTYPE html>
    <html>
    <head>
        <title>SpreadJS导入Excel示例</title>
        <script src="path/to/spread.js"></script> 
    </head>
    <body>
        <div id="spreadsheet"></div> 
    </body>
    </html>

在JavaScript代码中，您可以使用SpreadJS提供的API来导入和处理Excel文件：

// 获取电子表格容器
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadsheet"));
    
    // 创建一个文件输入元素，用于选择本地文件
    var fileInput = document.createElement("input");
    fileInput.type = "file";
    
    // 监听文件选择事件
    fileInput.addEventListener("change", function(e) {
        var file = e.target.files[0];
        var reader = new FileReader();
    
        // 读取文件内容
        reader.onload = function(e) {
            var data = e.target.result;
    
            // 解析Excel文件
            var workbook = new GC.Spread.Sheets.Workbook(document.createElement("div"));
            var sheet = workbook.getSheet(0);
            sheet.fromJSON(JSON.parse(data));
    
            // 将解析后的数据加载到电子表格中
            spread.fromJSON(sheet.toJSON());
        }
    
        // 以二进制方式读取文件
        reader.readAsBinaryString(file);
    });
    
    // 将文件输入元素附加到body中
    document.body.appendChild(fileInput);
    
    // 触发文件选择对话框
    fileInput.click();

####  ####

[https_demo.grapecity.com.cn_spreadjs_help_docs_overview]: https://demo.grapecity.com.cn/spreadjs/help/docs/overview
[4286acb03cc042d7bf1637774afeb827.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/153b7e09f54640efb888f04e949976ab.png