feat: 增加 DownloadAsync 方法

Author: ArgoZhang

src/components/BootstrapBlazor.Dom2Image/Services/DefaultDom2ImageService.cs

@@ -30,7 +30,7 @@ class DefaultDom2ImageService(IJSRuntime runtime, ILogger<DefaultDom2ImageServic
         catch (OperationCanceledException) { }
         catch (Exception ex)
         {
-            logger.LogError(ex, "{GetUrlAsync} throw exception", nameof(GetUrlAsync));
+            logger.LogError(ex, "{GetUrlAsync} throw exception: {ex}", nameof(GetUrlAsync), ex.Format());
         }
         return data;
     }
@@ -53,10 +53,33 @@ class DefaultDom2ImageService(IJSRuntime runtime, ILogger<DefaultDom2ImageServic
         catch (OperationCanceledException) { }
         catch (Exception ex)
         {
-            logger.LogError(ex, "{GetUrlAsync} throw exception", nameof(GetUrlAsync));
+            logger.LogError(ex, "{GetStreamAsync} throw exception: {ex}", nameof(GetStreamAsync), ex.Format());
         }
         return data;
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <param name="fileName"></param>
+    /// <param name="format"></param>
+    /// <param name="backgroundColor"></param>
+    /// <param name="options"></param>
+    /// <returns></returns>
+    public async Task DownloadAsync(string selector, string fileName = "capture", string? format = "png", string? backgroundColor = null, Dom2ImageOptions? options = null)
+    {
+        try
+        {
+            _jsModule ??= await LoadModule();
+            await _jsModule.InvokeAsync<IJSStreamReference?>("downloadAsync", selector, fileName, format, backgroundColor, options);
+        }
+        catch (OperationCanceledException) { }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "{DownloadAsync} throw exception: {ex}", nameof(DownloadAsync), ex.Format());
+        }
+    }
+
     private Task<JSModule> LoadModule() => runtime.LoadModule("./_content/BootstrapBlazor.Dom2Image/dom2image.js");
 }

src/components/BootstrapBlazor.Dom2Image/Services/IDom2ImageService.cs

@@ -26,4 +26,15 @@ public interface IDom2ImageService
     /// <param name="token"></param>
     /// <returns></returns>
     Task<Stream?> GetStreamAsync(string selector, Dom2ImageOptions? options = null, CancellationToken token = default);
+
+    /// <summary>
+    /// 通过指定选择器下载 Html 元素图片
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <param name="fileName"></param>
+    /// <param name="format"></param>
+    /// <param name="backgroundColor"></param>
+    /// <param name="options"></param>
+    /// <returns></returns>
+    Task DownloadAsync(string selector, string fileName = "capture", string? format = "png", string? backgroundColor = null, Dom2ImageOptions? options = null);
 }

src/components/BootstrapBlazor.Dom2Image/wwwroot/dom2image.js

@@ -4,7 +4,6 @@ export async function getUrl(selector, options = {}) {
     let data = null;
     const el = document.querySelector(selector);
     if (el) {
-        options.embedFonts = true;
         const result = await snapdom(el, options);
         data = result.url;
     }
@@ -15,9 +14,20 @@ export async function getStream(selector, options = {}) {
     let data = null;
     const el = document.querySelector(selector);
     if (el) {
-        options.embedFonts = true;
         const result = await snapdom(el, options);
         data = result.toBlob();
     }
     return data;
 }
+
+export async function downloadAsync(selector, filename, format, backgroundColor, options) {
+    const el = document.querySelector(selector);
+    if (el) {
+        const result = await snapdom(el, options);
+        data = result.download({
+            format,
+            filename,
+            backgroundColor
+        });
+    }
+}