Skip to content

Commit cf9977e

Browse files
ArgoZhangElanCao
ArgoZhang
and
ElanCao
authored
refactor(Html2Image): update Html2Image extension package (#5426)
* refactor: 更新配置类 * refactor: 移除 html2image 实现 * test: 更新单元测试 * test: 更新单元测试 * refactor: 更改为接口 * refactor: 更改为默认实现 * chore: 增加 Html2Image 服务 * refactor: 参数可为空 * test: 更新单元测试 * refactor: 移除 html2image 脚本 * refactor: 更新接口 * doc: 精简代码 * chore: bump version 9.3.1-beta32 Co-Authored-By: ElanCao <[email protected]> * refactor: 更新示例代码 * chore: 更新包版本 * chore: 更新配置 * doc: 更新资源文件 * doc: 更新文档 --------- Co-authored-by: ElanCao <[email protected]>
1 parent 0c035d2 commit cf9977e

File tree

15 files changed

+115
-114
lines changed

15 files changed

+115
-114
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
<PackageReference Include="BootstrapBlazor.FontAwesome" Version="9.0.2" />
3939
<PackageReference Include="BootstrapBlazor.Gantt" Version="9.0.2" />
4040
<PackageReference Include="BootstrapBlazor.Holiday" Version="9.0.1" />
41+
<PackageReference Include="BootstrapBlazor.Html2Image" Version="9.0.0-beta02" />
4142
<PackageReference Include="BootstrapBlazor.Html2Pdf" Version="9.0.2" />
4243
<PackageReference Include="BootstrapBlazor.IconPark" Version="9.0.2" />
4344
<PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.0" />

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,24 @@
44

55
<h4>@Localizer["Html2ImageIntro"]</h4>
66

7+
<PackageTips Name="BootstrapBlazor.Html2Image" />
8+
79
<DemoBlock Title="@Localizer["Html2ImageElementTitle"]" Introduction="@Localizer["Html2ImageElementIntro"]" Name="Normal">
10+
<section ignore>
11+
<div>@((MarkupString)Localizer["Html2ImageDesc"].Value)</div>
12+
</section>
813
<Button OnClickWithoutRender="OnExportAsync" Text="@Localizer["Html2ImageButtonText"]" Icon="fa-solid fa-image"></Button>
914
<Table TItem="Foo" Items="@Items.Take(3)" Id="table-9527">
1015
<TableColumns>
11-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
12-
<TableColumn @bind-Field="@context.Name" Sortable="true" Filterable="true" />
13-
<TableColumn @bind-Field="@context.Address" />
16+
<TableColumn @bind-Field="@context.DateTime" Width="180"/>
17+
<TableColumn @bind-Field="@context.Name" Sortable="true" Filterable="true"/>
18+
<TableColumn @bind-Field="@context.Address"/>
1419
</TableColumns>
1520
</Table>
16-
@if (!string.IsNullOrEmpty(_imageData))
17-
{
18-
<section ignore>
19-
<img src="@_imageData" class="w-100" />
20-
</section>
21-
}
21+
<section ignore>
22+
@if (!string.IsNullOrEmpty(_imageData))
23+
{
24+
<img src="@_imageData" class="w-100"/>
25+
}
26+
</section>
2227
</DemoBlock>

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

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -50,22 +50,7 @@ protected override void OnInitialized()
5050

5151
private async Task OnExportAsync()
5252
{
53-
_imageData = await Html2ImageService.GetDataAsync("#table-9527", new Html2ImageOptions()
54-
{
55-
//IncludeStyleProperties = [
56-
// $"{NavigationManager.BaseUri}_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css",
57-
// $"{NavigationManager.BaseUri}_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css",
58-
// $"{NavigationManager.BaseUri}BootstrapBlazor.Server.styles.css",
59-
// $"{NavigationManager.BaseUri}css/site.css"
60-
//]
61-
});
53+
_imageData = await Html2ImageService.GetDataAsync("#table-9527");
6254
StateHasChanged();
63-
64-
//if (stream != null)
65-
//{
66-
// var reader = new StreamReader(stream);
67-
// var data = await reader.ReadToEndAsync();
68-
// reader.Close();
69-
//}
7055
}
7156
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ public static IServiceCollection AddBootstrapBlazorServices(this IServiceCollect
6161
// 增加 Html2Pdf 导出服务
6262
services.AddBootstrapBlazorHtml2PdfService();
6363

64+
// 增加 Html2Image 导出服务
65+
services.AddBootstrapBlazorHtml2ImageService();
66+
6467
// 增加 WinBox 弹窗服务
6568
services.AddBootstrapBlazorWinBoxService();
6669

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6993,9 +6993,10 @@
69936993
},
69946994
"BootstrapBlazor.Server.Components.Samples.Html2Images": {
69956995
"Html2ImageTitle": "Html to Image",
6996-
"Html2ImageIntro": "Convert any area of ​​the web page into an image service",
6996+
"Html2ImageIntro": "Convert any area web page into an image service",
69976997
"Html2ImageElementTitle": "ToPng",
69986998
"Html2ImageElementIntro": "Get the <b>base64-encoded</b> image by calling the <code>GetDataAsync</code> method",
6999-
"Html2ImageButtonText": "Image"
6999+
"Html2ImageButtonText": "Image",
7000+
"Html2ImageDesc": "Since the underlying library is <a href=\"https://github.com/bubkoo/html-to-image?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">html-to-image</a>, if you encounter any problems during actual use, please refer to the project <a href=\"https://github.com/bubkoo/html-to-image/issues?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Issue</a>"
70007001
}
70017002
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6996,6 +6996,7 @@
69966996
"Html2ImageIntro": "将网页中任意区域内容转化成图片服务",
69976997
"Html2ImageElementTitle": "ToPng",
69986998
"Html2ImageElementIntro": "通过调用 <code>GetDataAsync</code> 方法获得 <b>base64-encoded</b> 图片",
6999-
"Html2ImageButtonText": "Image"
6999+
"Html2ImageButtonText": "Image",
7000+
"Html2ImageDesc": "由于底层使用的是 <a href=\"https://github.com/bubkoo/html-to-image?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">html-to-image</a> 实际使用过程中遇到问题请参考项目 <a href=\"https://github.com/bubkoo/html-to-image/issues?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Issue</a>"
70007001
}
70017002
}

‎src/BootstrapBlazor.Server/docs.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
"group-box": "GroupBoxes",
8989
"handwritten": "Handwrittens",
9090
"html-renderer": "HtmlRenderers",
91-
"html2images": "Html2Images",
91+
"html2image": "Html2Images",
9292
"html2pdf": "Html2Pdfs",
9393
"label": "Labels",
9494
"layout": "Layouts",

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.3.1-beta31</Version>
4+
<Version>9.3.1-beta32</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

‎src/BootstrapBlazor/Options/Html2ImageOptions.cs‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/BootstrapBlazor/Services/DefaultHtml2ImageService.cs‎

Lines changed: 5 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,66 +3,22 @@
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
55

6-
using Microsoft.Extensions.Logging;
7-
86
namespace BootstrapBlazor.Components;
97

108
/// <summary>
11-
/// 默认 Html to Image 实现
12-
/// <param name="runtime"></param>
13-
/// <param name="logger"></param>
9+
/// 默认 Html2Image 实现
1410
/// </summary>
15-
class DefaultHtml2ImageService(IJSRuntime runtime, ILogger<DefaultHtml2ImageService> logger) : IHtml2Image
11+
class DefaultHtml2ImageService : IHtml2Image
1612
{
17-
private JSModule? _jsModule;
13+
private const string ErrorMessage = "请增加依赖包 BootstrapBlazor.Html2Image 通过 AddBootstrapBlazorHtml2ImageService 进行服务注入; Please add BootstrapBlazor.Html2Image package and use AddBootstrapBlazorHtml2ImageService inject service";
1814

1915
/// <summary>
2016
/// <inheritdoc/>
2117
/// </summary>
22-
public Task<string?> GetDataAsync(string selector, Html2ImageOptions options) => Execute(selector, "toPng", options);
18+
public Task<string?> GetDataAsync(string selector, IHtml2ImageOptions? options = null) => throw new NotImplementedException(ErrorMessage);
2319

2420
/// <summary>
2521
/// <inheritdoc/>
2622
/// </summary>
27-
public Task<Stream?> GetStreamAsync(string selector, Html2ImageOptions options) => ToBlob(selector, options);
28-
29-
private async Task<string?> Execute(string selector, string methodName, Html2ImageOptions options)
30-
{
31-
string? data = null;
32-
try
33-
{
34-
_jsModule ??= await runtime.LoadModuleByName("html2image");
35-
if (_jsModule != null)
36-
{
37-
data = await _jsModule.InvokeAsync<string?>("execute", selector, methodName, options);
38-
}
39-
}
40-
catch (Exception ex)
41-
{
42-
logger.LogError(ex, "{Execute} throw exception", nameof(Execute));
43-
}
44-
return data;
45-
}
46-
47-
private async Task<Stream?> ToBlob(string selector, Html2ImageOptions options)
48-
{
49-
Stream? data = null;
50-
try
51-
{
52-
_jsModule ??= await runtime.LoadModuleByName("html2image");
53-
if (_jsModule != null)
54-
{
55-
var streamRef = await _jsModule.InvokeAsync<IJSStreamReference>("execute", selector, "toBlob", options);
56-
if (streamRef != null)
57-
{
58-
data = await streamRef.OpenReadStreamAsync(streamRef.Length);
59-
}
60-
}
61-
}
62-
catch (Exception ex)
63-
{
64-
logger.LogError(ex, "{ToBlob} throw exception", nameof(ToBlob));
65-
}
66-
return data;
67-
}
23+
public Task<Stream?> GetStreamAsync(string selector, IHtml2ImageOptions? options = null) => throw new NotImplementedException(ErrorMessage);
6824
}

0 commit comments

Comments
 (0)