feat: 增加缩略图功能

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -39,6 +39,10 @@
             </div>
         </div>
     }
+    @if (Options.ShowThumbnails)
+    {
+        <div class="bb-view-thumbnails"></div>
+    }
     <div class="bb-view-container">
         <div class="pdfViewer"></div>
     </div>

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

@@ -171,7 +171,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         Options.Url,
         Options.IsFitToPage,
-        TriggerPagesInit = Options.OnInitAsync != null,
+        TriggerPagesInit = Options.OnPagesInitAsync != null,
+        TriggerPagesLoaded = Options.OnPagesLoadedAsync != null,
         TriggerPageChanged = Options.OnPageChangedAsync != null,
         TriggerTowPagesOnViewChanged = Options.OnTwoPagesOneViewAsync != null
     });
@@ -220,9 +221,22 @@ public async Task RotateRight()
     [JSInvokable]
     public async Task PagesInit(int pagesCount)
     {
-        if (Options.OnInitAsync != null)
+        if (Options.OnPagesInitAsync != null)
         {
-            await Options.OnInitAsync(pagesCount);
+            await Options.OnPagesInitAsync(pagesCount);
+        }
+    }
+
+    /// <summary>
+    /// 页面加载完毕时回调方法
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task PagesLoaded(int pagesCount)
+    {
+        if (Options.OnPagesLoadedAsync != null)
+        {
+            await Options.OnPagesLoadedAsync(pagesCount);
         }
     }
 

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css

@@ -6,6 +6,31 @@
     height: calc(var(--bb-pdf-view-height) + var(--bb-pdf-toolbar-height));
 }
 
+.bb-view-thumbnails {
+    position: absolute;
+    top: var(--bb-pdf-toolbar-height);
+    left: 0;
+    bottom: 0;
+    width: 300px;
+    overflow: auto;
+    z-index: 5;
+    background-color: #28292a;
+    padding: 1rem 0;
+}
+
+::deep .bb-view-thumbnail-item {
+    display: block;
+    text-align: center;
+}
+
+    ::deep .bb-view-thumbnail-item:not(:last-child) {
+        margin-block-end: 1rem;
+    }
+
+    ::deep .bb-view-thumbnail-item img {
+        width: 42%;
+    }
+
 .bb-view-toolbar {
     height: var(--bb-pdf-toolbar-height);
     background-color: var(--bb-toolbar-background-color);

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

@@ -139,6 +139,25 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
         }
     });
 
+    eventBus.on("pagesloaded", async e => {
+        const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
+        pdfViewer.getPagesOverview().map(async (p, i) => {
+            var page = await pdfViewer.pdfDocument.getPage(i + 1);
+            var canvas = await makeThumb(page);
+            var img = document.createElement("img");
+            img.src = canvas.toDataURL();
+
+            var item = document.createElement("div");
+            item.classList.add("bb-view-thumbnail-item");
+            item.appendChild(img);
+            thumbnailsContainer.appendChild(item);
+        });
+
+        if (options.triggerPagesLoaded === true) {
+            await invoke.invokeMethodAsync("PagesLoaded", e.pagesCount);
+        }
+    })
+
     eventBus.on("pagechanging", async evt => {
         const page = evt.pageNumber;
         const pageNumberEl = el.querySelector(".bb-view-num");
@@ -194,6 +213,22 @@ const updateScale = (pdfViewer, button, rate) => {
     pdfViewer.currentScaleValue = v / 100;
 }
 
+const makeThumb = page => {
+    const outputScale = window.devicePixelRatio || 1;
+    var vp = page.getViewport({ scale: 1 });
+    var canvas = document.createElement("canvas");
+    var scalesize = 1;
+    canvas.width = vp.width * scalesize * outputScale;
+    canvas.height = vp.height * scalesize * outputScale;
+
+    return page.render({
+        canvasContext: canvas.getContext("2d"),
+        viewport: page.getViewport({ scale: scalesize * outputScale })
+    }).promise.then(function () {
+        return canvas;
+    })
+}
+
 export function dispose(id) {
     Data.remove(id);
 

src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs

@@ -14,6 +14,11 @@ public class PdfReaderOptions
     /// </summary>
     public bool ShowToolbar { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 是否显示缩略图 默认 true 显示
+    /// </summary>
+    public bool ShowThumbnails { get; set; } = true;
+
     /// <summary>
     /// 获得/设置 PDF 文档路径
     /// </summary>
@@ -52,7 +57,12 @@ public class PdfReaderOptions
     /// <summary>
     /// 页面初始化回调方法
     /// </summary>
-    public Func<int, Task>? OnInitAsync { get; set; }
+    public Func<int, Task>? OnPagesInitAsync { get; set; }
+
+    /// <summary>
+    /// 页面加载完毕回调方法
+    /// </summary>
+    public Func<int, Task>? OnPagesLoadedAsync { get; set; }
 
     /// <summary>
     /// 页面初始化回调方法