Skip to content

Commit 24726c3

Browse files
ArgoZhangArgoZhang
authored
feat(IDom2ImageService): add IDom2ImageService interface (#6661)
* chore: 增加 Dom2Image 扩展服务 * feat: 增加示例页面 * chore: 增加依赖 * doc: 精简代码 * doc: 增加菜单 * doc: 增加菜单本地化 * doc: 增加源码映射文件 * refactor: 更新键值 * doc: 更新示例 * doc: 更新本地化资源文件 * doc: 增加功能示例 * chore: 更新依赖包
1 parent ee89734 commit 24726c3

File tree

9 files changed

+127
-17
lines changed

9 files changed

+127
-17
lines changed

‎src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<PackageReference Include="BootstrapBlazor.CodeEditor" Version="9.0.3" />
3636
<PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
3737
<PackageReference Include="BootstrapBlazor.DockView" Version="9.1.18" />
38+
<PackageReference Include="BootstrapBlazor.Dom2Image" Version="9.0.0" />
3839
<PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
3940
<PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
4041
<PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@page "/dom2image"
2+
3+
<h3>@Localizer["Dom2ImageTitle"]</h3>
4+
5+
<h4>@Localizer["Dom2ImageIntro"]</h4>
6+
7+
<PackageTips Name="BootstrapBlazor.Dom2Image" />
8+
9+
<DemoBlock Title="@Localizer["Dom2ImageNormalTitle"]" Introduction="@Localizer["Dom2ImageNormalIntro"]" Name="Normal">
10+
<section ignore>
11+
<p>@((MarkupString)Localizer["Dom2ImageDesc"].Value)</p>
12+
<div>
13+
<Button OnClick="OnGetUrlAsync" Text="@Localizer["Dom2ImageButtonText"]" Icon="fa-solid fa-image"></Button>
14+
<Button OnClickWithoutRender="OnDownloadAsync" Text="@Localizer["Dom2ImageDownloadText"]" Icon="fa-solid fa-download"></Button>
15+
<Button OnClickWithoutRender="OnFullAsync" Text="@Localizer["Dom2ImageFullText"]" Icon="fa-solid fa-arrows-up-down-left-right"></Button>
16+
</div>
17+
</section>
18+
<Table TItem="Foo" Items="@Items.Take(3)" Id="table-9527">
19+
<TableColumns>
20+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
21+
<TableColumn @bind-Field="@context.Name" Sortable="true" Filterable="true" />
22+
<TableColumn @bind-Field="@context.Address" />
23+
</TableColumns>
24+
</Table>
25+
<section ignore>
26+
@if (!string.IsNullOrEmpty(_imageData))
27+
{
28+
<img src="@_imageData" class="w-100" />
29+
}
30+
</section>
31+
</DemoBlock>
32+

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Samples;
7+
8+
/// <summary>
9+
/// Dom2Image 组件
10+
/// </summary>
11+
public partial class Dom2Images
12+
{
13+
[Inject]
14+
[NotNull]
15+
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
16+
17+
[Inject]
18+
[NotNull]
19+
private IDom2ImageService? Dom2ImageService { get; set; }
20+
21+
[Inject]
22+
[NotNull]
23+
private IStringLocalizer<Dom2Images>? Localizer { get; set; }
24+
25+
[NotNull]
26+
private List<Foo>? Items { get; set; }
27+
28+
private string? _imageData;
29+
30+
/// <summary>
31+
/// <inheritdoc/>
32+
/// </summary>
33+
protected override void OnInitialized()
34+
{
35+
base.OnInitialized();
36+
37+
Items = Foo.GenerateFoo(LocalizerFoo);
38+
}
39+
40+
private async Task OnGetUrlAsync()
41+
{
42+
_imageData = await Dom2ImageService.GetUrlAsync("#table-9527");
43+
}
44+
45+
private async Task OnDownloadAsync()
46+
{
47+
var fileName = $"table-9527-{DateTime.Now:HHmmss}";
48+
await Dom2ImageService.DownloadAsync("#table-9527", fileName);
49+
}
50+
51+
private async Task OnFullAsync()
52+
{
53+
var fileName = $"full-{DateTime.Now:HHmmss}";
54+
await Dom2ImageService.DownloadAsync(".tabs-body-content:not(.d-none)", fileName);
55+
}
56+
}

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,6 @@ namespace BootstrapBlazor.Server.Components.Samples;
1010
/// </summary>
1111
public partial class Html2Images
1212
{
13-
/// <summary>
14-
/// 获得 IconTheme 实例
15-
/// </summary>
16-
[Inject]
17-
[NotNull]
18-
private IIconTheme? IconTheme { get; set; }
19-
2013
[Inject]
2114
[NotNull]
2215
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
@@ -29,10 +22,6 @@ public partial class Html2Images
2922
[NotNull]
3023
private IStringLocalizer<Html2Images>? Localizer { get; set; }
3124

32-
[Inject]
33-
[NotNull]
34-
private NavigationManager? NavigationManager { get; set; }
35-
3625
[NotNull]
3726
private List<Foo>? Items { get; set; }
3827

‎src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1559,6 +1559,12 @@ void AddServices(DemoMenuItem item)
15591559
Url = "dispatch"
15601560
},
15611561
new()
1562+
{
1563+
IsNew = true,
1564+
Text = Localizer["Dom2ImageService"],
1565+
Url = "dom2image"
1566+
},
1567+
new()
15621568
{
15631569
Text = Localizer["Download"],
15641570
Url = "download"

‎src/BootstrapBlazor.Server/Extensions/ServiceCollectionSharedExtensions.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ public static IServiceCollection AddBootstrapBlazorServices(this IServiceCollect
6767
// 增加 Html2Image 导出服务
6868
services.AddBootstrapBlazorHtml2ImageService();
6969

70+
// 增加 Dom2Image 导出服务
71+
services.AddBootstrapBlazorDom2ImageService();
72+
7073
// 增加 WinBox 弹窗服务
7174
services.AddBootstrapBlazorWinBoxService();
7275

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4852,7 +4852,8 @@
48524852
"Toolbar": "Toolbar",
48534853
"OpcDaService": "OpcDaServer",
48544854
"Navbar": "Navbar",
4855-
"TaskDashBoard": "TaskDashBoard"
4855+
"TaskDashBoard": "TaskDashBoard",
4856+
"Dom2ImageService": "IDom2HtmlService"
48564857
},
48574858
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
48584859
"TablesHeaderTitle": "Header grouping function",
@@ -7183,8 +7184,18 @@
71837184
},
71847185
"BootstrapBlazor.Server.Components.Samples.TaskBoard": {
71857186
"TaskBoardTitle": "Task DashBoard",
7186-
"TaskBoardIntro": "",
7187+
"TaskBoardIntro": "Background task dashboard",
71877188
"TaskBoardNormalTitle": "Basic usage",
7188-
"TaskBoardNormalIntro": ""
7189+
"TaskBoardNormalIntro": "This component provides detailed information about background task schedule trigger."
7190+
},
7191+
"BootstrapBlazor.Server.Components.Samples.Dom2Images": {
7192+
"Dom2ImageTitle": "Dom2Image",
7193+
"Dom2ImageIntro": "Export HTML snippets as images",
7194+
"Dom2ImageNormalTitle": "Basic usage",
7195+
"Dom2ImageNormalIntro": "Convert the node to an image by specifying a <code>Selector</code>",
7196+
"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>",
7197+
"Dom2ImageButtonText": "Convert",
7198+
"Dom2ImageDownloadText": "Download",
7199+
"Dom2ImageFullText": "Capture"
71897200
}
71907201
}

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4853,7 +4853,8 @@
48534853
"Toolbar": "工具栏 Toolbar",
48544854
"OpcDaService": "OpcDaServer 服务",
48554855
"Navbar": "导航栏 Navbar",
4856-
"TaskDashBoard": "任务管理器 TaskDashBoard"
4856+
"TaskDashBoard": "任务管理器 TaskDashBoard",
4857+
"Dom2ImageService": "节点转图片服务 IDom2HtmlService"
48574858
},
48584859
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
48594860
"TablesHeaderTitle": "表头分组功能",
@@ -7184,8 +7185,18 @@
71847185
},
71857186
"BootstrapBlazor.Server.Components.Samples.TaskBoard": {
71867187
"TaskBoardTitle": "Task DashBoard 任务管理器",
7187-
"TaskBoardIntro": "",
7188+
"TaskBoardIntro": "后台任务看板",
71887189
"TaskBoardNormalTitle": "基本用法",
7189-
"TaskBoardNormalIntro": ""
7190+
"TaskBoardNormalIntro": "本组件提供后台任务调度触发器详细信息"
7191+
},
7192+
"BootstrapBlazor.Server.Components.Samples.Dom2Images": {
7193+
"Dom2ImageTitle": "Dom2Image 元素转图片",
7194+
"Dom2ImageIntro": "将 Html 片段导出为图片",
7195+
"Dom2ImageNormalTitle": "基本用法",
7196+
"Dom2ImageNormalIntro": "通过指定 <code>Selector</code> 将此节点转成图片",
7197+
"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>",
7198+
"Dom2ImageButtonText": "转换",
7199+
"Dom2ImageDownloadText": "下载",
7200+
"Dom2ImageFullText": "长截图"
71907201
}
71917202
}

‎src/BootstrapBlazor.Server/docs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
"html-renderer": "HtmlRenderers",
9191
"html2image": "Html2Images",
9292
"html2pdf": "Html2Pdfs",
93+
"dom2image": "Dom2Images",
9394
"label": "Labels",
9495
"layout": "Layouts",
9596
"light": "Lights",

0 commit comments

Comments
 (0)