feat: 完成页面宽度功能

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -8,7 +8,7 @@
             <div class="bb-view-icon bb-view-bar"><i class="fa-solid fa-bars"></i></div>
             <span class="bb-view-subject">@_docTitle</span>
         </div>
-        <div class="bb-view-body">
+        <div class="@ViewBodyString">
             <input type="text" class="bb-view-num" value="1" /><span class="bb-view-slash">/</span><div>14</div>
             <div class="bb-view-divider"></div>
             <div class="bb-view-icon"><i class="fa-solid fa-minus"></i></div>

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

@@ -39,7 +39,12 @@ public partial class PdfReader
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
+    private string? ViewBodyString => CssBuilder.Default("bb-view-body")
+        .AddClass("fit-page", IsFitToPage)
+        .Build();
+
     private string? _docTitle;
+    private bool _isFitToPage;
 
     /// <summary>
     /// <inheritdoc/>
@@ -51,6 +56,27 @@ protected override void OnParametersSet()
         _docTitle = Path.GetFileName(Url);
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            _isFitToPage = IsFitToPage;
+        }
+
+        if (_isFitToPage != IsFitToPage)
+        {
+            _isFitToPage = IsFitToPage;
+            await TriggerFit(IsFitToPage ? "fitToPage" : "fitToWidth");
+        }
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -65,16 +91,18 @@ protected override void OnParametersSet()
     public Task NavigateToPageAsync(int pageNumber) => InvokeVoidAsync("navigateToPage", Id, pageNumber);
 
     /// <summary>
-    /// 
+    /// 适应页面宽度
     /// </summary>
     /// <returns></returns>
-    public Task FitToPage() => InvokeVoidAsync("fitToPage", Id);
+    public void FitToPage() => IsFitToPage = true;
 
     /// <summary>
-    /// 跳转到指定页码方法
+    /// 适应文档宽度
     /// </summary>
     /// <returns></returns>
-    public Task FitToWidth() => InvokeVoidAsync("fitToWidth", Id);
+    public void FitToWidth() => IsFitToPage = false;
+
+    private Task TriggerFit(string methodName) => InvokeVoidAsync(methodName, Id);
 
     /// <summary>
     /// 页面开始初始化时回调方法

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

@@ -42,10 +42,10 @@ export async function init(id, invoke, options) {
 
     eventBus.on("pagesinit", function () {
         if (options.isFitToPage) {
-            pdfViewer.currentScaleValue = 1.0;
+            pdfViewer.currentScaleValue = "page-width";
         }
         else {
-            pdfViewer.currentScaleValue = "page-width";
+            pdfViewer.currentScaleValue = 1.0;
         }
     });
 
@@ -79,14 +79,14 @@ export async function init(id, invoke, options) {
     Data.set(id, pdfViewer);
 }
 
-export function fitToPage(id) {
+export function fitToWidth(id) {
     const pdfViewer = Data.get(id);
     if (pdfViewer) {
         pdfViewer.currentScaleValue = 1.0;
     }
 }
 
-export function fitToWidth(id) {
+export function fitToPage(id) {
     const pdfViewer = Data.get(id);
     if (pdfViewer) {
         pdfViewer.currentScaleValue = "page-width";

src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf.css

@@ -50,6 +50,18 @@
     justify-content: center;
 }
 
+    .bb-view-body.fit-page .bb-view-fit-page {
+        display: none;
+    }
+
+    .bb-view-body.fit-page .bb-view-fit-width {
+        display: block;
+    }
+
+    .bb-view-body .bb-view-fit-width {
+        display: none;
+    }
+
 .bb-view-num, .bb-view-scale {
     width: 36px;
     text-align: center;