SpreadJS在服务器端导入导出Excel

SpreadJS基于HTML5和jQuery技术,通过画布呈现在客户端。类似Excel的风格外观和用户界面行为为最终用户提供了丰富的、可交互的用户体验。本文主要介绍 SpreadJS在服务器端导入导出Excel的使用方法。

发布于 2015/09/11 00:00

SpreadJS

SpreadJS基于HTML5和jQuery技术,通过画布呈现在客户端。类似Excel的风格外观和用户界面行为为最终用户提供了丰富的、可交互的用户体验。本文主要介绍 SpreadJS在服务器端导入导出Excel的使用方法。

1.在aspx页面内添加导入导出代码

        protected void ImportBtn_Click(object sender, EventArgs e)
        {
            string uriString = "http://localhost/ExcelIO/xsapi/import";
            System.Net.WebClient myWebClient = new System.Net.WebClient();
            string fileName = MapPath("Test.xls");
            byte[] responseArray = myWebClient.UploadFile(uriString, "POST", fileName);
            string spreadjsJsonResult = System.Text.Encoding.UTF8.GetString(responseArray);
            HiddenField1.Value = spreadjsJsonResult;
        }
        protected void ExportBtn_Click(object sender, EventArgs e)
        {
            using (var stream = File.Create(MapPath("test1.xlsx")))
            {
                WebClient request = new WebClient();
                System.Collections.Specialized.NameValueCollection formData = new System.Collections.Specialized.NameValueCollection();
                formData["type"] = "application/json";
                formData["data"] = this.HiddenField1.Value;
                byte[] result = request.UploadValues("http://localhost/ExcelIO/xsapi/export", "POST", formData);
                stream.Write(result, 0, result.Length);
                stream.Close();
            }
            this.HiddenField1.Value = "";
        }

 

2.前台JS脚本

    <script type="text/javascript">
        $(document).ready(function () {
            $("#ss").wijspread();
            var spread = $("#ss").wijspread("spread");
            var sheet = spread.getActiveSheet();
            //Import Excel to SpreadJS.
            if ($("#HiddenField1").val() != "") {
                var data = JSON.parse($("#HiddenField1").val());
                spread.fromJSON(data.spread);
            }
            //Export SpreadJS to Excel.
            $("#ExportBtn").click(function () {
                var data = spread.toJSON();
                var dataObj = {
                    "spread": spread.toJSON(),
                    "exportFileType": "xlsx",
                    "excel": {
                        "saveFlags": 0,
                        "password": ""
                    }
                };
                var content = JSON.stringify(dataObj);
                $("#HiddenField1").val(content);
            });
        });
    </script>

 

3.页面文件

    <form id="form1" runat="server">
        <div>
            <div id="ss" style="width: 100%; height: 600px; border: 1px solid gray">
	        </div>
            <asp:Button ID="ImportBtn" runat="server" Text="Import Excel" OnClick="ImportBtn_Click" />
            <asp:Button ID="ExportBtn" runat="server" Text="Export Excel" OnClick="ExportBtn_Click" />
            <asp:HiddenField ID="HiddenField1" runat="server" />
        </div>
    </form>

 

运行截图:

image

示例下载:

SpreadJS | 下载试用

纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。

如下资源列表,可以为您评估产品提供帮助:

相关产品
推荐相关案例
推荐相关资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态