feat(OfficeViewer): add OfficeViewer component (#6287)

* wip: 临时提交

* doc: 增加示例文件

* doc: 增加菜单

* doc: 增加 Office 文档预览组件资源文件

* doc: 增加源码映射

* doc: 更新示例文件减小文件体积

* doc: 更正预览文档链接

* doc: 依赖更改为包

* chore: bump version 9.7.4

* chore: 更改组件名称

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -56,6 +56,7 @@
     <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.6" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.OctIcon" Version="9.0.4" />
+    <PackageReference Include="BootstrapBlazor.OfficeViewer" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfReader" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfViewer" Version="9.0.3" />

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

@@ -25,9 +25,6 @@ protected override void OnInitialized()
         ExcelSampleFile = CombineFilename("sample.xlsx");
 
         FileList.Add("sample.xlsx");
-        FileList.Add("sample2.xlsx");
-        FileList.Add("sample3.xlsx");
-        FileList.Add("sample2.docx");
         FileList.Add("sample.docx");
         Url = FileList[0];
 

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

@@ -0,0 +1,15 @@
+@page "/office-viewer"
+@inject IStringLocalizer<OfficeViewers> Localizer
+
+<h3>@Localizer["OfficeViewerTitle"]</h3>
+
+<h4>@Localizer["OfficeViewerDescription"]</h4>
+
+<PackageTips Name="BootstrapBlazor.OfficeDocumentViewer" />
+
+<DemoBlock Title="@Localizer["OfficeViewerNormalTitle"]" Introduction="@Localizer["OfficeViewerNormalIntro"]" Name="Normal">
+    <section ignore>
+        <Select @bind-Value="@_doc" Items="_docs"></Select>
+    </section>
+    <OfficeViewer Url="@_doc" Height="620px" OnLoaded="OnLoaded"></OfficeViewer>
+</DemoBlock>

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

@@ -0,0 +1,26 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// PdfViewers
+/// </summary>
+public partial class OfficeViewers
+{
+    [Inject, NotNull]
+    private ToastService? ToastService { get; set; }
+
+    private readonly List<SelectedItem> _docs =
+    [
+        new SelectedItem("https://www.blazor.zone/samples/sample.docx", "sample.docx"),
+        new SelectedItem("https://www.blazor.zone/samples/sample.xlsx", "sample.xlsx"),
+        new SelectedItem("https://www.blazor.zone/samples/sample.pptx", "sample.pptx"),
+    ];
+
+    private string _doc = "https://www.blazor.zone/samples/sample.docx";
+
+    private Task OnLoaded() => ToastService.Success("Office Documentation Viewer", Localizer["OfficeViewerToastSuccessfulContent"]);
+}

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

@@ -18,7 +18,7 @@
             </div>
         </div>
     </section>
-    <PdfViewer Url="./samples/pdf-viewer.pdf" Height="620px"
+    <PdfViewer Url="./samples/sample.pdf" Height="620px"
                NotSupportCallback="NotSupportCallback" OnLoaded="OnLoaded"
                UseGoogleDocs="@_useGoogleDocs"></PdfViewer>
 </DemoBlock>

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -707,6 +707,12 @@ void AddData(DemoMenuItem item)
                     Url = "mermaid"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["OfficeViewer"],
+                    Url = "office-viewer"
+                },
+                new()
                 {
                     Text = Localizer["PdfReader"],
                     Url = "pdf-reader"

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

@@ -4952,7 +4952,8 @@
     "CardUpload": "CardUpload",
     "DropUpload": "DropUpload",
     "Vditor": "Vditor Markdown",
-    "TcpSocketFactory": "ITcpSocketFactory"
+    "TcpSocketFactory": "ITcpSocketFactory",
+    "OfficeViewer": "Office Viewer"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7200,5 +7201,12 @@
     "VditorSubTitle": "Vditor is a browser-based Markdown editor that supports WYSIWYG, instant rendering (similar to Typora), and split-screen preview mode.",
     "BaseUsageTitle": "Basic usage",
     "BaseUsageIntro": "Set the content displayed by the component by setting the <code>Value</code> value, and set the component configuration information by setting the <code>Options</code> parameter"
+  },
+  "BootstrapBlazor.Server.Components.Samples.OfficeViewers": {
+    "OfficeViewerTitle": "Office Document Viewer",
+    "OfficeViewerDescription": "This component previews Office documents using Microsoft's online document preview feature",
+    "OfficeViewerNormalTitle": "Basic Usage",
+    "OfficeViewerNormalIntro": "Set the document URL for preview by configuring the <code>Url</code> value",
+    "OfficeViewerToastSuccessfulContent": "Office document loaded successfully"
   }
 }

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

@@ -4952,7 +4952,8 @@
     "CardUpload": "卡片上传组件 CardUpload",
     "DropUpload": "拖动上传组件 DropUpload",
     "Vditor": "富文本框 Vditor Markdown",
-    "TcpSocketFactory": "套接字服务 ITcpSocketFactory"
+    "TcpSocketFactory": "套接字服务 ITcpSocketFactory",
+    "OfficeViewer": "Office 文档预览组件"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7200,5 +7201,12 @@
     "VditorSubTitle": "Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式",
     "BaseUsageTitle": "基本用法",
     "BaseUsageIntro": "通过设置 <code>Value</code> 值设置组件显示的内容，通过 <code>Options</code> 参数设置组件配置信息"
+  },
+  "BootstrapBlazor.Server.Components.Samples.OfficeViewers": {
+    "OfficeViewerTitle": "Office 文档预览器",
+    "OfficeViewerDescription": "本组件通过使用微软在线文档预览功能预览 Office 文档内容",
+    "OfficeViewerNormalTitle": "基本用法",
+    "OfficeViewerNormalIntro": "通过设置 <code>Url</code> 值设置预览文档地址",
+    "OfficeViewerToastSuccessfulContent": "Office 文档加载成功"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -241,7 +241,8 @@
     "fullscreen-button": "FullScreenButtons",
     "meet": "Meets",
     "vditor": "Vditors",
-    "socket-factory": "SocketFactories"
+    "socket-factory": "SocketFactories",
+    "office-viewer": "OfficeViewers"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",