feat(PdfReader): add OnPrintingAsync parameter (#731)

* feat: 增加打印回调方法

* feat(PdfReader): add OnPrintingAsync parameter

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.1-beta07</Version>
+    <Version>10.0.1-beta08</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs

@@ -110,11 +110,17 @@ public partial class PdfReader
     public string? MoreButtonIcon { get; set; }
 
     /// <summary>
-    /// 点击下载按钮回调方法 默认 null 使用组件内置下载功能
+    /// 点击下载按钮回调方法 默认 null
     /// </summary>
     [Parameter]
     public Func<Task>? OnDownloadAsync { get; set; }
 
+    /// <summary>
+    /// 正在打印回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<Task>? OnPrintingAsync { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-pdf-reader")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -347,4 +353,17 @@ public async Task PageChanged(uint pageIndex)
             await OnPageChangedAsync(pageIndex);
         }
     }
+
+    /// <summary>
+    /// 正在打印回调方法
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task Printing()
+    {
+        if (OnPrintingAsync != null)
+        {
+            await OnPrintingAsync();
+        }
+    }
 }

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js

@@ -127,7 +127,7 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
         }
 
         if (options.triggerPagesInit === true) {
-            await invoke.invokeMethodAsync("pagesInit", numPages);
+            await invoke.invokeMethodAsync("PagesInit", numPages);
         }
     });
 
@@ -139,6 +139,12 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
         if (options.triggerPagesLoaded === true) {
             await invoke.invokeMethodAsync("PagesLoaded", e.pagesCount);
         }
+
+        const controls = el.querySelector(".bb-view-controls");
+        EventHandler.on(controls, "click", ".bb-view-print", e => {
+            printPdf(options.url);
+            await invoke.invokeMethodAsync("Printing");
+        });
     })
 
     eventBus.on("pagechanging", async evt => {
@@ -276,6 +282,31 @@ const makeThumb = async page => {
     return canvas;
 }
 
+const printPdf = url => {
+    let iframe = document.querySelector(".bb-view-print-iframe");
+    if (iframe) {
+        iframe.remove();
+    }
+
+    iframe = document.createElement("iframe");
+    iframe.classList = "bb-view-print-iframe";
+    iframe.style.position = "fixed";
+    iframe.style.right = "100%";
+    iframe.style.bottom = "100%";
+    iframe.src = url;
+
+    iframe.onload = () => {
+        iframe.contentWindow.addEventListener('afterprint', function () {
+            document.body.removeChild(iframe);
+        });
+
+        iframe.contentWindow.focus();
+        iframe.contentWindow.print();
+    };
+
+    document.body.appendChild(iframe);
+}
+
 export function dispose(id) {
     Data.remove(id);
 
@@ -304,5 +335,13 @@ export function dispose(id) {
         if (thumbnailsContainer) {
             EventHandler.off(thumbnailsContainer, "click");
         }
+
+        const controls = el.querySelector(".bb-view-controls");
+        EventHandler.off(controls, "click");
+
+        const iframe = document.querySelector('.bb-view-print-iframe');
+        if (iframe) {
+            iframe.remove();
+        }
     }
 }