feat: 增加两页一视图方法

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -27,7 +27,15 @@
             <div class="bb-view-controls">
                 <div class="bb-view-icon bb-view-download"><i class="fa-solid fa-arrow-right-to-bracket fa-rotate-90"></i></div>
                 <div class="bb-view-icon bb-view-print"><i class="fa-solid fa-print"></i></div>
-                <div class="bb-view-icon bb-view-home"><i class="fa-solid fa-flag"></i></div>
+                <Dropdown TValue="string" Color="Color.None" SkipValidate="true" ShowLabel="false"
+                          IsPopover="true" Icon="@MoreButtonIcon">
+                    <ItemsTemplate>
+                        @if (Options.ShowTowPagesOnViewButton)
+                        {
+                            <div class="dropdown-item dropdown-item-pages">Two pages on view</div>
+                        }
+                    </ItemsTemplate>
+                </Dropdown>
             </div>
         </div>
     }

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

@@ -20,6 +20,12 @@ public partial class PdfReader
     [NotNull]
     public PdfReaderOptions? Options { get; set; }
 
+    /// <summary>
+    /// 获得/设置 更多按钮图标 默认为 null 使用内置图标
+    /// </summary>
+    [Parameter]
+    public string? MoreButtonIcon { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-pdf-reader")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -38,6 +44,7 @@ public partial class PdfReader
     private uint _currentPage;
     private string? _url;
     private string? _currentScale;
+    private bool _enableTwoPagesOnView;
 
     private readonly HashSet<string> AllowedScaleValues = ["page-actual", "page-width", "page-height", "page-fit", "auto"];
 
@@ -96,6 +103,8 @@ protected override void OnParametersSet()
             Options.CurrentPage = 1;
         }
         _docTitle = Path.GetFileName(Options.Url);
+
+        MoreButtonIcon ??= "fa-solid fa-ellipsis-vertical";
     }
 
     /// <summary>
@@ -113,6 +122,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentPage = Options.CurrentPage;
             _url = Options.Url;
             _currentScale = Options.CurrentScale;
+            _enableTwoPagesOnView = Options.EnableTwoPagesOnView;
         }
 
         if (_url != Options.Url)
@@ -136,6 +146,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentScale = Options.CurrentScale;
             await InvokeVoidAsync("scale", Id, _currentScale);
         }
+        if (_enableTwoPagesOnView != Options.EnableTwoPagesOnView)
+        {
+            _currentScale = Options.CurrentScale;
+            await InvokeVoidAsync("setPages", Id, _enableTwoPagesOnView);
+        }
     }
 
     /// <summary>
@@ -147,7 +162,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         Options.Url,
         Options.IsFitToPage,
         TriggerPagesInit = Options.OnInitAsync != null,
-        TriggerPageChanged = Options.OnPageChangedAsync != null
+        TriggerPageChanged = Options.OnPageChangedAsync != null,
+        TriggerTowPagesOnViewChanged = Options.OnTwoPagesOneViewAsync != null
     });
 
     /// <summary>

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

@@ -18,6 +18,14 @@
         visibility: hidden;
     }
 
+    .bb-view-toolbar ::deep .btn {
+        --bs-btn-color: #fff;
+    }
+
+    .bb-view-toolbar ::deep .dropdown-toggle::after {
+        content: none;
+    }
+
 .bb-view-title {
     display: flex;
     align-items: center;

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

@@ -102,6 +102,13 @@ export function scale(id, scale) {
     }
 }
 
+export function setPages(id, enableTowPagesOnView) {
+    const { el, pdfViewer } = Data.get(id);
+    if (pdfViewer) {
+        pdfViewer.spreadMode = 1;
+    }
+}
+
 const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
     eventBus.on("pagesinit", async () => {
         if (options.isFitToPage) {
@@ -149,6 +156,18 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
 
     EventHandler.on(minus, "click", e => updateScale(pdfViewer, e.target, -1));
     EventHandler.on(plus, "click", e => updateScale(pdfViewer, e.target, 1));
+
+    const towPagesOneView = el.querySelector(".dropdown-item-pages");
+    if (towPagesOneView) {
+        EventHandler.on(towPagesOneView, "click", e => {
+            if (pdfViewer.spreadMode === 0) {
+                pdfViewer.spreadMode = 1;
+            }
+            else {
+                pdfViewer.spreadMode = 0;
+            }
+        });
+    }
 }
 
 const updateScale = (pdfViewer, button, rate) => {
@@ -159,7 +178,7 @@ const updateScale = (pdfViewer, button, rate) => {
     const scale = pdfViewer.currentScale;
     const current = Math.round(parseFloat(scale * 100), 0);
     const step = [25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500];
-    const findValues = step.filter(s => rate > 0 ? current  < s : current > s);
+    const findValues = step.filter(s => rate > 0 ? current < s : current > s);
     let v = 100;
     if (rate > 0) {
         v = findValues.shift();
@@ -177,7 +196,16 @@ export function dispose(id) {
     if (el) {
         const minus = el.querySelector(".bb-page-minus");
         const plus = el.querySelector(".bb-page-plus");
-        EventHandler.off(minus, "click");
-        EventHandler.off(plus, "click");
+        if (minus) {
+            EventHandler.off(minus, "click");
+        }
+        if (plus) {
+            EventHandler.off(plus, "click");
+        }
+
+        const towPagesOneView = el.querySelector(".dropdown-item-pages");
+        if (towPagesOneView) {
+            EventHandler.off(towPagesOneView, "click");
+        }
     }
 }

src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs

@@ -39,6 +39,16 @@ public class PdfReaderOptions
     /// </summary>
     public bool IsFitToPage { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示双页单视图按钮 默认 true 显示
+    /// </summary>
+    public bool ShowTowPagesOnViewButton { get; set; } = true;
+
+    /// <summary>
+    /// 获得/设置 是否启用双页单视图模式 默认 false
+    /// </summary>
+    public bool EnableTwoPagesOnView { get; set; }
+
     /// <summary>
     /// 页面初始化回调方法
     /// </summary>
@@ -48,4 +58,9 @@ public class PdfReaderOptions
     /// 页面初始化回调方法
     /// </summary>
     public Func<uint, Task>? OnPageChangedAsync { get; set; }
+
+    /// <summary>
+    /// 设置双页单视图模式回调方法
+    /// </summary>
+    public Func<bool, Task>? OnTwoPagesOneViewAsync { get; set; }
 }