在线excel：LuckySheet 入门
Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
文档地址：https://dream-num.github.io/LuckysheetDocs/zh/
做一个页面编辑然后保存进数据库。另一个页面把前一个页面的内容展示出来。第一个页面，
<!DOCTYPE html> <html> <head lang='zh'> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="renderer" content="webkit" /> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" /> <title>Luckysheet</title> <link rel='stylesheet' href='./plugins/css/pluginsCss.css' /> <link rel='stylesheet' href='./plugins/plugins.css' /> <link rel='stylesheet' href='./css/luckysheet.css' /> <link rel='stylesheet' href='./assets/iconfont/iconfont.css' /> <script src="./plugins/js/plugin.js"></script> <!-- rollup luckysheet.js --> <script src="./luckysheet.umd.js"></script> </head> <body> <!-- Non-full screen test --> <!-- <div style="position: relative;width: 100%;height: 100%;"> <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div> </div> --> <button onclick="myFunction()">保存</button> <div id="luckysheet" style="margin:100px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"> </div> <!-- demo feature, non-production use --> <script> function myFunction() { var data2 = luckysheet.getAllSheets(); var cnt = JSON.stringify(data2); $.post("xls.aspx", { cnt: cnt }); } $(function () { // According to the browser language //var options = { // container: 'luckysheet' //luckysheet为容器id //} //luckysheet.create(options); var options = { container: 'luckysheet', //luckysheet为容器id title: "在线excel", // 设定表格名称 lang: 'zh', // 设定表格语言 } luckysheet.create(options); }) </script> <style> /* 自定义loading演示样式 */ @keyframes loading-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loading-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40px; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120px; } } .loadingAnimation { width: 3em; height: 3em; animation: loading-rotate 2s linear infinite; } .loadingAnimation circle { animation: loading-dash 1.5s ease-in-out infinite; stroke-dasharray: 90, 150; stroke-dashoffset: 0; stroke-width: 2; stroke: currentColor; stroke-linecap: round; } </style> </body> </html>
function myFunction() {
var data2 = luckysheet.getAllSheets();
var cnt = JSON.stringify(data2);
$.post("xls.aspx", {
cnt: cnt });
}
这段，是把整个excel的 数据全部以json 的方式post一个aspx页面，在这个aspx页面，保存进数据库。
第二个页面：
<!DOCTYPE html> <html> <head lang='zh'> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="renderer" content="webkit" /> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" /> <title>Luckysheet</title> <link rel='stylesheet' href='./plugins/css/pluginsCss.css' /> <link rel='stylesheet' href='./plugins/plugins.css' /> <link rel='stylesheet' href='./css/luckysheet.css' /> <link rel='stylesheet' href='./assets/iconfont/iconfont.css' /> <script src="./plugins/js/plugin.js"></script> <!-- rollup luckysheet.js --> <script src="./luckysheet.umd.js"></script> </head> <body> <!-- Non-full screen test --> <!-- <div style="position: relative;width: 100%;height: 100%;"> <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div> </div> --> <button onclick="myFunction()">点我</button> <div id="luckysheet" style="margin:100px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"> </div> <!-- demo feature, non-production use --> <script> function myFunction() { var data2 = luckysheet.getAllSheets(); var cnt = JSON.stringify(data2); $.post("xls.aspx", { cnt: cnt }); } $(function () { // According to the browser language //var options = { // container: 'luckysheet' //luckysheet为容器id // load //} // https://localhost:7048/api/1 //luckysheet.create(options); var options = { container: 'luckysheet', //luckysheet为容器id title: "在线excel", // 设定表格名称 lang: 'zh', // 设定表格语言 gridKey: "excel001", /* data: eval(returnValue.result),*/ loadUrl: "http://***.***.***.***:9091/api/1" } luckysheet.create(options); }) </script> <style> /* 自定义loading演示样式 */ @keyframes loading-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loading-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40px; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120px; } } .loadingAnimation { width: 3em; height: 3em; animation: loading-rotate 2s linear infinite; } .loadingAnimation circle { animation: loading-dash 1.5s ease-in-out infinite; stroke-dasharray: 90, 150; stroke-dashoffset: 0; stroke-width: 2; stroke: currentColor; stroke-linecap: round; } </style> </body> </html>
黄色这段js，loadUrl: "http://***.***.***.***:9091/api/1" loadUrl 是post方法，获取api 的 json数据，这个json就是上个页面存进数据库的。
using MyWebApp.dapper; using System.Data; using System.Security.Claims; namespace MyWebApp { public class MyEndpoint1 : EndpointWithoutRequest { public override void Configure() { Post("/api/1"); AllowAnonymous(); Options(x => x.RequireCors(p => p.AllowAnyOrigin())); } public override Task HandleAsync(CancellationToken t) { string sql = AppConfig.sqlserver; string sqlstr = " select top 1 * from LuckySheetJson order by create_time desc"; DapperUtility dapper = new DapperUtility(); List<m_LuckySheetJson> list=dapper.QuerySQL<m_LuckySheetJson>(sqlstr); m_LuckySheetJson item = list[0]; string LuckySheetJson = item.LuckySheetJson; return SendAsync(LuckySheetJson); } } }
我这里尝试用了一下FastEndpoints，感觉还不错。FastEndpoints 是一个基于 .NET 6 开发的开源 webapi 框架，它可以很好地替代 .NET Minimal APIs 和 MVC ，专门为开发效率而生，带来了全新的开发模式和编码体验。
