doc: 增加 Html2Image 示例

Author: ArgoZhang

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

@@ -0,0 +1,23 @@
+@page "/html2image"
+
+<h3>@Localizer["Html2ImageTitle"]</h3>
+
+<h4>@Localizer["Html2ImageDescription"]</h4>
+
+<Tips>
+    <div>@((MarkupString)Localizer["Html2ImageNote"].Value)</div>
+</Tips>
+
+<DemoBlock Title="@Localizer["Html2ImageElementTitle"]" Introduction="@Localizer["Html2ImageElementIntro"]" Name="Normal">
+    <section ignore>
+        <p>@((MarkupString)Localizer["Html2ImageElementDesc"].Value)</p>
+        <Button OnClickWithoutRender="OnExportAsync" Text="@Localizer["ExportButtonText"]" Icon="@_exportIcon"></Button>
+    </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>
+</DemoBlock>

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

@@ -0,0 +1,70 @@
+// 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>
+/// Html2Image 组件
+/// </summary>
+public partial class Html2Images
+{
+    /// <summary>
+    /// 获得 IconTheme 实例
+    /// </summary>
+    [Inject]
+    [NotNull]
+    private IIconTheme? IconTheme { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IHtml2Image? Html2ImageService { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Html2Pdfs>? Localizer { get; set; }
+
+    [Inject]
+    [NotNull]
+    private NavigationManager? NavigationManager { get; set; }
+
+    [NotNull]
+    private List<Foo>? Items { get; set; }
+
+    private string? _exportIcon = "";
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+
+        _exportIcon = IconTheme.GetIconByKey(ComponentIcons.TableExportPdfIcon);
+    }
+    private async Task OnExportAsync()
+    {
+        var stream = await Html2ImageService.GetStreamAsync("#table-9527", new Html2ImageOptions()
+        {
+            //IncludeStyleProperties = [
+            //    $"{NavigationManager.BaseUri}_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css",
+            //    $"{NavigationManager.BaseUri}_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css",
+            //    $"{NavigationManager.BaseUri}BootstrapBlazor.Server.styles.css",
+            //    $"{NavigationManager.BaseUri}css/site.css"
+            //]
+        });
+        if (stream != null)
+        {
+            var reader = new StreamReader(stream);
+            var data = await reader.ReadToEndAsync();
+            reader.Close();
+        }
+    }
+}