doc(UniverSheet): update sample code (#5502)

* doc: 增加保存按钮示例

* chore: 增加推送报表示例

* doc: 更新报表模板

* doc: 更新多语言文件

* feat: 增加保存文档示例

* refactor(Textarea): 重构代码

* refactor: 清空其他单元格

* refactor: 重构代码

* chore: 更新依赖包

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -64,7 +64,7 @@
     <PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.1" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="9.0.0" />
-    <PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta01" />
+    <PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta02" />
     <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.WinBox" Version="9.0.7" />
   </ItemGroup>

src/BootstrapBlazor.Server/Components/Samples/UniverSheets.razor

@@ -14,10 +14,14 @@
     <section ignore>
         <p>@((MarkupString)Localizer["NormalDesc1"].Value)</p>
         <Button OnClickWithoutRender="OnPushExcelData" Text="@Localizer["PushButtonText"]"></Button>
+        <Button OnClickWithoutRender="OnSaveExcelData" Text="@Localizer["SaveButtonText"]"></Button>
     </section>
     <div class="bb-sheet-demo">
         <UniverSheet @ref="_sheetExcel" OnReadyAsync="OnReadyAsync"></UniverSheet>
     </div>
+    <section ignore>
+        <Textarea rows="3" readonly Value="@_jsonData"></Textarea>
+    </section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["PluginTitle"]"
@@ -28,6 +32,6 @@
         <Button OnClickWithoutRender="OnPushPluginData" Text="@Localizer["PushButtonText"]"></Button>
     </section>
     <div class="bb-sheet-demo">
-        <UniverSheet @ref="_sheetPlugin" Plugins="Plugins" OnPostDataAsync="OnPostDataAsync"></UniverSheet>
+        <UniverSheet @ref="_sheetPlugin" Plugins="_plugins" OnPostDataAsync="OnPostDataAsync"></UniverSheet>
     </div>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/UniverSheets.razor.cs

@@ -10,24 +10,45 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public partial class UniverSheets
 {
+    [Inject, NotNull]
+    private IWebHostEnvironment? WebHost { get; set; }
+
     [Inject, NotNull]
     private ToastService? ToastService { get; set; }
 
     [Inject, NotNull]
     private IStringLocalizer<UniverSheets>? Localizer { get; set; }
 
-    private readonly Dictionary<string, string> Plugins = new()
+    private readonly Dictionary<string, string> _plugins = new()
     {
         { "ReportPlugin", "univer-sheet/plugin.js" }
     };
 
-    private UniverSheet _sheetExcel = default!;
+    [NotNull]
+    private UniverSheet? _sheetExcel = null;
+
+    [NotNull]
+    private UniverSheet? _sheetPlugin = null;
 
-    private UniverSheet _sheetPlugin = default!;
+    private static string? _reportData = null;
+
+    private string? _jsonData = null;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override async Task OnInitializedAsync()
+    {
+        var reportFile = Path.Combine(WebHost.WebRootPath, "univer-sheet", "report.json");
+        if (File.Exists(reportFile))
+        {
+            _reportData = await File.ReadAllTextAsync(reportFile);
+        }
+    }
 
     private async Task OnReadyAsync() => await ToastService.Information(Localizer["ToastOnReadyTitle"], Localizer["ToastOnReadyContent"]);
 
-    private static Task<UniverSheetData?> OnPostDataAsync(UniverSheetData data)
+    private static Task<UniverSheetData> OnPostDataAsync(UniverSheetData data)
     {
         // 这里可以根据 data 的内容进行处理然后返回处理后的数据
         // 本例返回与时间相关的数据
@@ -41,21 +62,26 @@ public partial class UniverSheets
                 Value = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")
             }
         };
-        return Task.FromResult<UniverSheetData?>(result);
+        return Task.FromResult(result);
     }
 
     private async Task OnPushExcelData()
     {
         await _sheetExcel.PushDataAsync(new UniverSheetData()
         {
-            MessageName = "MessageName",
-            CommandName = "CommandName",
-            Data = new object[]
-            {
-                new object[] { "1", "2", "3", "4", "5" },
-                new object[] { "1", "2", "3", "4", "5" },
-            }
+            CommandName = "SetWorkbook",
+            Data = _reportData
+        });
+    }
+
+    private async Task OnSaveExcelData()
+    {
+        var result = await _sheetExcel.PushDataAsync(new UniverSheetData()
+        {
+            CommandName = "GetWorkbook"
         });
+        _jsonData = result?.Data?.ToString();
+        StateHasChanged();
     }
 
     private async Task OnPushPluginData()

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -7009,9 +7009,10 @@
     "UniverSheetIntro": "Encapsulates the core spreadsheet component of the open source office suite ​Univer​, providing a high-performance, scalable online spreadsheet solution",
     "NormalTitle": "Basic usage",
     "NormalIntro": "Set your own plugins by setting the <code>Plugins</code> parameter",
-    "NormalDesc1": "Push data to the spreadsheet by calling the instance method <code>PushDataAsync</code>",
+    "NormalDesc1": "Push data to the spreadsheet by calling the instance method <code>PushDataAsync</code>. Click the <b>Save Data</b> button to get the serialized data of the table data",
     "NormalDesc2": "Click the <b>Push Data</b> button to push data to the table, and click the first icon on the <b>Toolbar</b> to get data from the server.",
     "PushButtonText": "Push",
+    "SaveButtonText": "Save",
     "ToastOnReadyTitle": "Notification",
     "ToastOnReadyContent": "The sheet is ready for push data.",
     "PluginTitle": "Plugins",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -7009,9 +7009,10 @@
     "UniverSheetIntro": "封装开源办公套件 ​Univer​ 的核心电子表格组件，提供高性能、可扩展的在线表格解决方案",
     "NormalTitle": "基础用法",
     "NormalIntro": "通过调用实例方法 <code>PushDataAsync</code> 推送数据到电子表格",
-    "NormalDesc1": "点击 <b>推送数据</b> 按钮主动将数据推送给表格",
+    "NormalDesc1": "点击 <b>推送数据</b> 按钮主动将数据推送给表格，点击 <b>保存数据</b> 按钮获得表格数据序列化的数据",
     "NormalDesc2": "点击 <b>推送数据</b> 按钮主动将数据推送给表格，点击 <b>工具栏</b> 第一个小按钮主动从服务器端获取数据",
     "PushButtonText": "推送数据",
+    "SaveButtonText": "保存数据",
     "ToastOnReadyTitle": "组件通知",
     "ToastOnReadyContent": "表格组件已就绪，可进行后续数据推送等操作",
     "PluginTitle": "自定义插件",

src/BootstrapBlazor.Server/wwwroot/univer-sheet/controller.js

@@ -14,10 +14,10 @@ const GetDataOperation = {
         });
         if (data) {
             const univerAPI = dataService.getUniverSheet().univerAPI;
-            const range = univerAPI.getActiveWorkbook().getActiveSheet().getRange(0, 0, 2, 1)
+            const range = univerAPI.getActiveWorkbook().getActiveSheet().getRange(0, 0, 2, 3)
             const defaultData = [
-                [{ v: data.data.key }],
-                [{ v: data.data.value }]
+                [{ v: data.data.key }, { v: null }, { v: null }],
+                [{ v: data.data.value }, { v: null }, { v: null }]
             ]
             range.setValues(defaultData);
         }