refactor: 增加页面适配功能

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -1,3 +1,4 @@
+@using Microsoft.AspNetCore.Components.Web
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
 
@@ -14,8 +15,8 @@
             <input type="text" class="bb-view-scale" value="100%" />
             <div class="bb-view-icon"><i class="fa-solid fa-plus"></i></div>
             <div class="bb-view-divider"></div>
-            <div class="bb-view-icon bb-view-fit-page"><i class="fa-solid fa-arrows-left-right-to-line"></i></div>
-            <div class="bb-view-icon bb-view-fit-width"><i class="fa-solid fa-arrows-left-right"></i></div>
+            <div class="bb-view-icon bb-view-fit-page" @onclick="FitToPage"><i class="fa-solid fa-arrows-left-right-to-line"></i></div>
+            <div class="bb-view-icon bb-view-fit-width" @onclick="FitToWidth"><i class="fa-solid fa-arrows-left-right"></i></div>
             <div class="bb-view-icon bb-view-fit-rotate"><i class="fa-solid fa-rotate-left"></i></div>
             <div class="bb-view-divider"></div>
             <div class="bb-view-icon bb-view-draw"><i class="fa-solid fa-pen-to-square"></i></div>

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

@@ -24,6 +24,12 @@ public partial class PdfReader
     [Parameter]
     public string? ViewHeight { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否适配当前页面宽度 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsFitToPage { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-pdf-reader")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -49,7 +55,7 @@ protected override void OnParametersSet()
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { Url });
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { Url, IsFitToPage });
 
     /// <summary>
     /// 跳转到指定页码方法
@@ -58,6 +64,18 @@ protected override void OnParametersSet()
     /// <returns></returns>
     public Task NavigateToPageAsync(int pageNumber) => InvokeVoidAsync("navigateToPage", Id, pageNumber);
 
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <returns></returns>
+    public Task FitToPage() => InvokeVoidAsync("fitToPage", Id);
+
+    /// <summary>
+    /// 跳转到指定页码方法
+    /// </summary>
+    /// <returns></returns>
+    public Task FitToWidth() => InvokeVoidAsync("fitToWidth", Id);
+
     /// <summary>
     /// 页面开始初始化时回调方法
     /// </summary>

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

@@ -15,13 +15,7 @@ export async function init(id, invoke, options) {
 
     await addLink('./_content/BootstrapBlazor.PdfReader/css/pdf.css');
 
-    //const elementId = el.querySelector('canvas');
-    //const pdf = new Pdf(elementId);
-    //pdf.scale = scale;
-    //pdf.rotation = rotation;
-
     const loadingTask = pdfjsLib.getDocument(options);
-
     loadingTask.onProgress = function (progressData) {
         console.log(progressData.loaded, progressData.total);
     };
@@ -47,9 +41,12 @@ export async function init(id, invoke, options) {
 
 
     eventBus.on("pagesinit", function () {
-        // We can use pdfViewer now, e.g. let's change default scale.
-        pdfViewer.currentScaleValue = "page-width";
-        console.log("pagesInit");
+        if (options.isFitToPage) {
+            pdfViewer.currentScaleValue = 1.0;
+        }
+        else {
+            pdfViewer.currentScaleValue = "page-width";
+        }
     });
 
     // handle the promise
@@ -82,8 +79,22 @@ export async function init(id, invoke, options) {
     Data.set(id, pdfViewer);
 }
 
+export function fitToPage(id) {
+    const pdfViewer = Data.get(id);
+    if (pdfViewer) {
+        pdfViewer.currentScaleValue = 1.0;
+    }
+}
+
+export function fitToWidth(id) {
+    const pdfViewer = Data.get(id);
+    if (pdfViewer) {
+        pdfViewer.currentScaleValue = "page-width";
+    }
+}
+
 export function dispose(id) {
-    Data.remove(id);
+    Data.get(id);
 }
 
 function getCanvas(item) {