!3662 feat(#I67AK7): add FileViewer component

* doc: 代码重构
* doc: 示例文档移动到 server 工程
* doc: 增加 FileViewer 组件菜单
* chore: 移除冗余配置
* Update sample2.docx
* FileViewers 切换url不刷新修复
* 资源发布路径release需要特别注意一下
* Update FileViewers.razor.cs
* 添加 文件预览器 FileViewer 组件

src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj

@@ -32,6 +32,7 @@
     <PackageReference Include="BootstrapBlazor.TableExport" Version="7.*" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="7.*" />
     <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.FileViewer" Version="7.*" />
   </ItemGroup>
 
   <ItemGroup>

src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs

@@ -475,6 +475,12 @@ internal static class MenusLocalizerExtensions
                     Url = "fileicons"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["FileViewer"],
+                    Url = "FileViewers"
+                },
+                new()
                 {
                     Text = Localizer["Geolocation"],
                     Url = "geolocations"

src/BootstrapBlazor.Shared/Locales/en.json

@@ -1579,7 +1579,8 @@
     "SignaturePadText": "SignaturePad",
     "BluetoothText": "Bluetooth & Printer",
     "PdfReaderText": "PDF Reader",
-    "VideoPlayerText": "VideoPlayer"
+    "VideoPlayerText": "VideoPlayer",
+    "FileViewerText": "FileViewer"
   },
   "BootstrapBlazor.Shared.Pages.Breakpoints": {
     "Heading": "Breakpoints",
@@ -4383,7 +4384,8 @@
     "PulseButton": "PulseButton",
     "Bluetooth": "Bluetooth & Printer",
     "PdfReader": "PDF Reader",
-    "VideoPlayer": "VideoPlayer"
+    "VideoPlayer": "VideoPlayer",
+    "FileViewer": "FileViewer"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
     "H1": "Header grouping function",
@@ -5389,5 +5391,13 @@
   },
   "BootstrapBlazor.Shared.Samples.PackageTips": {
     "Tips": "<p><b>Precautions</b></p><p>This component relies on <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a>, which needs to reference its component package when using this component</p><p><b>Nuget Install</b></p><p>Use nuget.org to install <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a> component</p>"
+  },
+  "BootstrapBlazor.Shared.Samples.FileViewers": {
+    "Title": "FileViewer",
+    "BaseUsageText": "Basic usage",
+    "BaseUsageIntro": "Excel/Word file path or URL",
+    "BaseUsageText2": "Reload file",
+    "BaseUsageIntro2": "Using the Reload method",
+    "Tips": "Currently supports Excel(.docx) and Word(.xlsx) formats."
   }
 }

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -1579,7 +1579,8 @@
     "SignaturePadText": "手写签名 SignaturePad",
     "BluetoothText": "蓝牙和打印 Bluetooth & Printer",
     "PdfReaderText": "PDF阅读器 PDF Reader",
-    "VideoPlayerText": "视频播放器 VideoPlayer"
+    "VideoPlayerText": "视频播放器 VideoPlayer",
+    "FileViewerText": "文件预览器 FileViewer"
   },
   "BootstrapBlazor.Shared.Pages.Breakpoints": {
     "Heading": "断点",
@@ -4386,7 +4387,8 @@
     "PulseButton": "心跳按钮 PulseButton",
     "Bluetooth": "蓝牙和打印 Bluetooth & Printer",
     "PdfReader": "PDF阅读器 PDF Reader",
-    "VideoPlayer": "视频播放器 VideoPlayer"
+    "VideoPlayer": "视频播放器 VideoPlayer",
+    "FileViewer": "文件预览器 FileViewer"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
     "H1": "表头分组功能",
@@ -5394,5 +5396,13 @@
   },
   "BootstrapBlazor.Shared.Samples.PackageTips": {
     "Tips": "<p><b>注意事项 ：</b></p><p>本组件依赖于 <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a>，使用本组件时需要引用其组件包</p><p><b>Nuget 包安装</b></p><p>使用 <a href='https://www.nuget.org/packages?q={0}' target='_blank'>nuget.org</a> 进行 <code>{0}</code> 组件的安装</p>"
+  },
+  "BootstrapBlazor.Shared.Samples.FileViewers": {
+    "Title": "FileViewer 文件预览器",
+    "BaseUsageText": "基础用法",
+    "BaseUsageIntro": "Excel/Word 文件路径或者URL",
+    "BaseUsageText2": "重新载入文件",
+    "BaseUsageIntro2": "使用 Reload 方法重新载入文件",
+    "Tips": "目前支支持 Excel(.docx) 和 Word(.xlsx) 格式."
   }
 }

src/BootstrapBlazor.Shared/Pages/Coms.razor

@@ -113,6 +113,7 @@
             <ComponentCard Text="@Localizer["TreeViewText"]" Image="Tree.svg" Url="treeviews"></ComponentCard>
             <ComponentCard Text="@Localizer["TransitionText"]" Image="Transition.jpg" Url="transitions"></ComponentCard>
             <ComponentCard Text="@Localizer["VideoPlayerText"]" Image="VideoPlayer.jpg" Url="videoPlayers"></ComponentCard>
+            <ComponentCard Text="@Localizer["FileViewerText"]" Image="FileViewer.jpg" Url="fileViewers"></ComponentCard>
         </ComponentCategory>
 
         <ComponentCategory Text="@Localizer["Text6"]">

src/BootstrapBlazor.Shared/Samples/FileViewers.razor

@@ -0,0 +1,38 @@
+@page "/FileViewers"
+@namespace BootstrapBlazor.Shared.Samples
+@inject IStringLocalizer<FileViewers> Localizer
+
+<h3>@Localizer["Title"]</h3>
+
+<PackageTips Name="BootstrapBlazor.FileViewer" />
+
+<Tips>
+    <p>@((MarkupString)Localizer["Tips"].Value)</p>
+</Tips>
+
+<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Nomal">
+    <p><h5>Word</h5></p>
+    <FileViewer Filename="@WordSampleFile" Height="500px" />
+    <br />
+    <p><h5>Excel</h5></p>
+    <FileViewer Filename="@ExcelSampleFile" Height="500px" />
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["BaseUsageText2"]" Introduction="@Localizer["BaseUsageIntro2"]" Name="Nomal">
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-xl-1">
+            <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ChangeURL" />
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-xl-8">
+            <BootstrapInput @bind-Value="@Url" />
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
+            <Button Color="Color.Primary" OnClick="Apply">加载</Button>
+        </div>
+    </div>
+
+    <FileViewer @ref="fileViewer" Filename=@Url Height="500px" />
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />
+

src/BootstrapBlazor.Shared/Samples/FileViewers.razor.cs

@@ -0,0 +1,160 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using Microsoft.Extensions.Options;
+
+namespace BootstrapBlazor.Shared.Samples;
+
+/// <summary>
+/// 
+/// </summary>
+public partial class FileViewers
+{
+    [Inject]
+    [NotNull]
+    private IOptionsMonitor<WebsiteOptions>? WebsiteOption { get; set; }
+
+    [NotNull]
+    private FileViewer? fileViewer { get; set; }
+
+    [NotNull]
+    private string? WordSampleFile { get; set; }
+
+    [NotNull]
+    private string? ExcelSampleFile { get; set; }
+
+    [NotNull]
+    private string? Url { get; set; }
+
+    private List<string> FileList { get; } = new();
+
+    [NotNull]
+    private List<SelectedItem>? Items { get; set; }
+
+    /// <summary>
+    /// OnInitialized 方法
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        WordSampleFile = CombineFilename("sample.docx");
+        ExcelSampleFile = CombineFilename("sample.xlsx");
+
+        FileList.Add(CombineFilename("sample3.xlsx"));
+        FileList.Add(CombineFilename("sample2.xlsx"));
+        FileList.Add(CombineFilename("sample.xlsx"));
+        FileList.Add(CombineFilename("sample2.docx"));
+        FileList.Add(CombineFilename("sample.docx"));
+        Url = FileList[0];
+
+        Items = FileList.Select(i => new SelectedItem(i, $"File{i}")).ToList();
+    }
+
+    private string CombineFilename(string filename)
+    {
+#if DEBUG
+        filename = Path.Combine(WebsiteOption.CurrentValue.WebRootPath, "samples", filename);
+#else
+        filename = Path.Combine(WebsiteOption.CurrentValue.ContentRootPath, "wwwroot", "samples", filename);
+#endif
+        return filename;
+    }
+
+    private async Task ChangeURL(SelectedItem e)
+    {
+        Url = e.Value;
+        StateHasChanged();
+        await fileViewer.Reload(e.Value);
+    }
+
+    private async Task Apply()
+    {
+        await fileViewer.Reload(Url);
+    }
+
+    /// <summary>
+    /// 获得属性方法
+    /// </summary>
+    /// <returns></returns>
+    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+    {
+        // TODO: 移动到数据库中
+        new() {
+            Name = nameof(FileViewer.Filename),
+            Description = "Excel/Word 文件路径或者URL",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new() {
+            Name = nameof(FileViewer.Width),
+            Description = "宽度",
+            Type = "string",
+            ValueList = "-",
+            DefaultValue = "100%"
+        },
+        new() {
+            Name = nameof(FileViewer.Height),
+            Description = "高度",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = "700px"
+        },
+        new() {
+            Name = nameof(FileViewer.StyleString),
+            Description = "组件外观 Css Style",
+            Type = "string",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new() {
+            Name = nameof(FileViewer.Html),
+            Description = "设置 Html 直接渲染",
+            Type = "string",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new() {
+            Name = nameof(FileViewer.Stream),
+            Description = "用于渲染的文件流,为空则用Filename参数读取文件",
+            Type = "Stream",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new() {
+            Name = nameof(FileViewer.IsExcel),
+            Description = "文件流模式需要指定是否 Excel",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new() {
+            Name = nameof(FileViewer.NodataString),
+            Description = "无数据提示文本",
+            Type = "string",
+            ValueList = "-",
+            DefaultValue = "无数据"
+        },
+        new() {
+            Name = nameof(FileViewer.LoadingString),
+            Description = "载入中提示文本",
+            Type = "string",
+            ValueList = "-",
+            DefaultValue = "载入中..."
+        },
+        new() {
+            Name = "Reload(string filename)",
+            Description = "重新载入文件方法",
+            Type = "async Task",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new() {
+            Name = "Refresh()",
+            Description = "刷新方法",
+            Type = "async Task",
+            ValueList = " — ",
+            DefaultValue = " — "
+        }
+    };
+}

src/BootstrapBlazor.Shared/Samples/PdfReaders.razor.cs

@@ -19,8 +19,8 @@ public partial class PdfReaders
     private int Page { get; set; } = 3;
     private bool ForcePDFJS { get; set; } = true;
 
-    private string Filename = "/_content/BootstrapBlazor.Shared/sample.pdf";
-    private string UrlBaseStream = "https://blazor.app1.es/_content/DemoShared/";
+    private string Filename = "/_content/BootstrapBlazor.Shared/samples/sample.pdf";
+    private string UrlBaseStream = "https://blazor.zone/_content/BootstrapBlazor/samples/";
     private string FilenameStream = "sample.pdf";
     
 

src/BootstrapBlazor.Shared/docs.json

@@ -78,7 +78,8 @@
     "bluetooths": "Bluetooths",
     "ribbontabs": "RibbonTabs",
     "pdfreaders": "PdfReaders",
-    "videoPlayers": "VideoPlayers"
+    "videoPlayers": "VideoPlayers",
+    "fileviewers": "FileViewers"
   },
   "video": {
     "autorefresh": "BV1ap4y1x7Qn?p=8",