feat(Mermaid): add DownloadPdfAsync method (#705)

* chore: updated to version 11.12.1

* chore: bump version 10.0.1

* doc: 代码格式化

* feat: 增加导出 Pdf 方法

Author: ArgoZhang

src/components/BootstrapBlazor.Mermaid/BootstrapBlazor.Mermaid.csproj

@@ -1,5 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
+  <PropertyGroup>
+    <Version>10.0.1</Version>
+  </PropertyGroup>
+
   <PropertyGroup>
     <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Mermaid</PackageTags>
     <Description>Bootstrap UI components extensions of Mermaid</Description>

src/components/BootstrapBlazor.Mermaid/Mermaid.razor.cs

@@ -1,4 +1,4 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). 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/
 
@@ -37,6 +37,12 @@ public partial class Mermaid
     [Parameter]
     public string? Title { set; get; }
 
+    [Inject, NotNull]
+    private IHtml2Pdf? Html2PdfService { get; set; }
+
+    [Inject, NotNull]
+    private DownloadService? DownloadService { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-mermaid mermaid")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -48,7 +54,8 @@ public partial class Mermaid
     protected override async Task OnParametersSetAsync()
     {
         await base.OnParametersSetAsync();
-        await MermaidChanged();
+
+        await Render();
     }
 
     /// <summary>
@@ -58,21 +65,53 @@ protected override async Task OnParametersSetAsync()
     protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, BuildDiagramText());
 
     /// <summary>
-    /// 内容改变时重新渲染mermaid
+    /// 内容改变时重新渲染 mermaid
     /// </summary>
-    /// <returns></returns>
+    [Obsolete("已弃用，请使用 Render 代替; Deprecated; please use Render instead.")]
+    [ExcludeFromCodeCoverage]
     public Task MermaidChanged() => InvokeVoidAsync("init", Id, BuildDiagramText());
 
+    /// <summary>
+    /// 内容改变时重新渲染 mermaid
+    /// </summary>
+    public Task Render() => InvokeVoidAsync("render", Id, BuildDiagramText());
+
     /// <summary>
     /// 导出图为 base64 字符串
     /// </summary>
     /// <returns>base64 string of the diagram</returns>
     public Task<string?> ExportBase64MermaidAsync() => InvokeAsync<string>("getContent", Id);
 
     /// <summary>
-    /// 构造 Mermaid 代码
+    /// 导出图为 Pdf 文档流
     /// </summary>
-    /// <returns></returns>
+    public async Task<Stream?> ExportPdfAsync(CancellationToken token = default)
+    {
+        Stream? stream = null;
+        var html = await InvokeAsync<string?>("getSvgHtml", token, Id);
+        if (html != null)
+        {
+            stream = await Html2PdfService.PdfStreamFromHtmlAsync(html);
+        }
+
+        return stream;
+    }
+
+    /// <summary>
+    /// 下载 Pdf 文档
+    /// </summary>
+    /// <returns>base64 string of the diagram</returns>
+    public async Task DownloadPdfAsync(string fileName, CancellationToken token = default)
+    {
+        ArgumentNullException.ThrowIfNull(fileName);
+
+        var stream = await ExportPdfAsync(token);
+        if (stream != null)
+        {
+            await DownloadService.DownloadFromStreamAsync(fileName, stream);
+        }
+    }
+
     private string BuildDiagramText()
     {
         StringBuilder sb = new();

src/components/BootstrapBlazor.Mermaid/Mermaid.razor.js

@@ -1,14 +1,20 @@
-import mermaid from './mermaid.min.js';
+import { addScript } from '../BootstrapBlazor/modules/utility.js'
 
 export async function init(id, content) {
+    await addScript('./_content/BootstrapBlazor.Mermaid/mermaid.min.js');
+
+    await render(id, content);
+}
+
+export async function render(id, content) {
     mermaid.initialize({ startOnLoad: false });
-    const render = await mermaid.render(id + '-svg', content);
+    const render = await mermaid.render(`${id}-svg`, content);
     if (render) {
         const el = document.getElementById(id);
-        el.innerText = "";
         el.innerHTML = render.svg;
     }
 }
+
 export function getContent(id) {
     let svgDataUrl = "";
     const el = document.getElementById(id);
@@ -25,3 +31,13 @@ export function getContent(id) {
         }
     }
 }
+
+export function getSvgHtml(id) {
+    const el = document.getElementById(id);
+    const svg = el.querySelector('svg');
+    if (svg) {
+        return svg.outerHTML;
+    }
+
+    return "";
+}