feat(IDom2ImageService): add IDom2ImageService interface

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -35,6 +35,7 @@
     <PackageReference Include="BootstrapBlazor.CodeEditor" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.18" />
+    <PackageReference Include="BootstrapBlazor.Dom2Image" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />

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

@@ -0,0 +1,32 @@
+@page "/dom2image"
+
+<h3>@Localizer["Dom2ImageTitle"]</h3>
+
+<h4>@Localizer["Dom2ImageIntro"]</h4>
+
+<PackageTips Name="BootstrapBlazor.Dom2Image" />
+
+<DemoBlock Title="@Localizer["Dom2ImageNormalTitle"]" Introduction="@Localizer["Dom2ImageNormalIntro"]" Name="Normal">
+    <section ignore>
+        <p>@((MarkupString)Localizer["Dom2ImageDesc"].Value)</p>
+        <div>
+            <Button OnClick="OnGetUrlAsync" Text="@Localizer["Dom2ImageButtonText"]" Icon="fa-solid fa-image"></Button>
+            <Button OnClickWithoutRender="OnDownloadAsync" Text="@Localizer["Dom2ImageDownloadText"]" Icon="fa-solid fa-download"></Button>
+            <Button OnClickWithoutRender="OnFullAsync" Text="@Localizer["Dom2ImageFullText"]" Icon="fa-solid fa-arrows-up-down-left-right"></Button>
+        </div>
+    </section>
+    <Table TItem="Foo" Items="@Items.Take(3)" Id="table-9527">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.Name" Sortable="true" Filterable="true" />
+            <TableColumn @bind-Field="@context.Address" />
+        </TableColumns>
+    </Table>
+    <section ignore>
+        @if (!string.IsNullOrEmpty(_imageData))
+        {
+            <img src="@_imageData" class="w-100" />
+        }
+    </section>
+</DemoBlock>
+

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

@@ -0,0 +1,56 @@
+// 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>
+/// Dom2Image 组件
+/// </summary>
+public partial class Dom2Images
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IDom2ImageService? Dom2ImageService { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Dom2Images>? Localizer { get; set; }
+
+    [NotNull]
+    private List<Foo>? Items { get; set; }
+
+    private string? _imageData;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+    }
+
+    private async Task OnGetUrlAsync()
+    {
+        _imageData = await Dom2ImageService.GetUrlAsync("#table-9527");
+    }
+
+    private async Task OnDownloadAsync()
+    {
+        var fileName = $"table-9527-{DateTime.Now:HHmmss}";
+        await Dom2ImageService.DownloadAsync("#table-9527", fileName);
+    }
+
+    private async Task OnFullAsync()
+    {
+        var fileName = $"full-{DateTime.Now:HHmmss}";
+        await Dom2ImageService.DownloadAsync(".tabs-body-content:not(.d-none)", fileName);
+    }
+}

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

@@ -10,13 +10,6 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public partial class Html2Images
 {
-    /// <summary>
-    /// 获得 IconTheme 实例
-    /// </summary>
-    [Inject]
-    [NotNull]
-    private IIconTheme? IconTheme { get; set; }
-
     [Inject]
     [NotNull]
     private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
@@ -29,10 +22,6 @@ public partial class Html2Images
     [NotNull]
     private IStringLocalizer<Html2Images>? Localizer { get; set; }
 
-    [Inject]
-    [NotNull]
-    private NavigationManager? NavigationManager { get; set; }
-
     [NotNull]
     private List<Foo>? Items { get; set; }
 

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1559,6 +1559,12 @@ void AddServices(DemoMenuItem item)
                     Url = "dispatch"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["Dom2ImageService"],
+                    Url = "dom2image"
+                },
+                new()
                 {
                     Text = Localizer["Download"],
                     Url = "download"

src/BootstrapBlazor.Server/Extensions/ServiceCollectionSharedExtensions.cs

@@ -67,6 +67,9 @@ public static IServiceCollection AddBootstrapBlazorServices(this IServiceCollect
         // 增加 Html2Image 导出服务
         services.AddBootstrapBlazorHtml2ImageService();
 
+        // 增加 Dom2Image 导出服务
+        services.AddBootstrapBlazorDom2ImageService();
+
         // 增加 WinBox 弹窗服务
         services.AddBootstrapBlazorWinBoxService();
 

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

@@ -4852,7 +4852,8 @@
     "Toolbar": "Toolbar",
     "OpcDaService": "OpcDaServer",
     "Navbar": "Navbar",
-    "TaskDashBoard": "TaskDashBoard"
+    "TaskDashBoard": "TaskDashBoard",
+    "Dom2ImageService": "IDom2HtmlService"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7183,8 +7184,18 @@
   },
   "BootstrapBlazor.Server.Components.Samples.TaskBoard": {
     "TaskBoardTitle": "Task DashBoard",
-    "TaskBoardIntro": "",
+    "TaskBoardIntro": "Background task dashboard",
     "TaskBoardNormalTitle": "Basic usage",
-    "TaskBoardNormalIntro": ""
+    "TaskBoardNormalIntro": "This component provides detailed information about background task schedule trigger."
+  },
+  "BootstrapBlazor.Server.Components.Samples.Dom2Images": {
+    "Dom2ImageTitle": "Dom2Image",
+    "Dom2ImageIntro": "Export HTML snippets as images",
+    "Dom2ImageNormalTitle": "Basic usage",
+    "Dom2ImageNormalIntro": "Convert the node to an image by specifying a <code>Selector</code>",
+    "Dom2ImageDesc": "Since the underlying framework uses <a href=\"https://github.com/zumerlab/snapdom?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">SnapDOM</a> , if you encounter any problems during actual use, please refer to the project <a href=\"https://github.com/zumerlab/snapdom/issues?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Issue</a>",
+    "Dom2ImageButtonText": "Convert",
+    "Dom2ImageDownloadText": "Download",
+    "Dom2ImageFullText": "Capture"
   }
 }

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

@@ -4853,7 +4853,8 @@
     "Toolbar": "工具栏 Toolbar",
     "OpcDaService": "OpcDaServer 服务",
     "Navbar": "导航栏 Navbar",
-    "TaskDashBoard": "任务管理器 TaskDashBoard"
+    "TaskDashBoard": "任务管理器 TaskDashBoard",
+    "Dom2ImageService": "节点转图片服务 IDom2HtmlService"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7184,8 +7185,18 @@
   },
   "BootstrapBlazor.Server.Components.Samples.TaskBoard": {
     "TaskBoardTitle": "Task DashBoard 任务管理器",
-    "TaskBoardIntro": "",
+    "TaskBoardIntro": "后台任务看板",
     "TaskBoardNormalTitle": "基本用法",
-    "TaskBoardNormalIntro": ""
+    "TaskBoardNormalIntro": "本组件提供后台任务调度触发器详细信息"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Dom2Images": {
+    "Dom2ImageTitle": "Dom2Image 元素转图片",
+    "Dom2ImageIntro": "将 Html 片段导出为图片",
+    "Dom2ImageNormalTitle": "基本用法",
+    "Dom2ImageNormalIntro": "通过指定 <code>Selector</code> 将此节点转成图片",
+    "Dom2ImageDesc": "由于底层使用的是 <a href=\"https://github.com/zumerlab/snapdom?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">SnapDOM</a> 实际使用过程中遇到问题请参考项目 <a href=\"https://github.com/zumerlab/snapdom/issues?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Issue</a>",
+    "Dom2ImageButtonText": "转换",
+    "Dom2ImageDownloadText": "下载",
+    "Dom2ImageFullText": "长截图"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -90,6 +90,7 @@
     "html-renderer": "HtmlRenderers",
     "html2image": "Html2Images",
     "html2pdf": "Html2Pdfs",
+    "dom2image": "Dom2Images",
     "label": "Labels",
     "layout": "Layouts",
     "light": "Lights",