feat: 增加滚动方向等参数

Author: ArgoZhang

src/components/BootstrapBlazor.EmbedPDF/EmbedPDF.razor.cs

@@ -21,17 +21,23 @@ public partial class EmbedPDF
     [Parameter]
     public string ViewHeight { get; set; } = "600px";
 
+    /// <summary>
+    /// 获得/设置 是否显示外边框
+    /// </summary>
+    [Parameter]
+    public bool ShowBorder { get; set; } = true;
+
     /// <summary>
     /// 获得/设置 标签显示模式 默认值 <see cref="EmbedPDFTabBarMode.Always"/>
     /// </summary>
     [Parameter]
     public EmbedPDFTabBarMode TabBarMode { get; set; } = EmbedPDFTabBarMode.Always;
 
     /// <summary>
-    /// 获得/设置 是否显示外边框
+    /// 获得/设置 标签显示模式 默认值 <see cref="EmbedPDFTabBarMode.Always"/>
     /// </summary>
     [Parameter]
-    public bool ShowBorder { get; set; } = true;
+    public EmbedPDFScrollDirection ScrollDirection { get; set; } = EmbedPDFScrollDirection.Vertical;
 
     /// <summary>
     /// 获得/设置 主题样式 默认 <see cref="EmbedPDFTheme.System"/>
@@ -45,6 +51,18 @@ public partial class EmbedPDF
     [Parameter]
     public string? Language { get; set; }
 
+    /// <summary>
+    /// 获得/设置 当前页码
+    /// </summary>
+    [Parameter]
+    public uint CurrentPage { get; set; }
+
+    /// <summary>
+    /// 获得/设置 页码之间的间隙 默认 null 未设置 使用默认值 20
+    /// </summary>
+    [Parameter]
+    public uint PageGap { get; set; }
+
     private string? StyleString => CssBuilder.Default()
         .AddClass("border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden;", ShowBorder)
         .AddClass($"height: {ViewHeight};", !string.IsNullOrEmpty(ViewHeight))
@@ -55,6 +73,19 @@ public partial class EmbedPDF
     private EmbedPDFTheme _theme;
     private string? _language;
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        if (string.IsNullOrEmpty(Language))
+        {
+            Language = CultureInfo.CurrentUICulture.Name;
+        }
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -82,6 +113,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _theme = Theme;
             await InvokeVoidAsync("setTheme", Id, _theme.ToDescriptionString());
         }
+        if (_language != Language)
+        {
+            _language = Language;
+            await InvokeVoidAsync("setLocale", Id, _language);
+        }
     }
 
     /// <summary>
@@ -93,6 +129,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         TabBar = TabBarMode.ToDescriptionString(),
         Theme = Theme.ToDescriptionString(),
         Src = Url,
-        Lang = Language ?? CultureInfo.CurrentUICulture.Name
+        Lang = Language,
+        CurrentPage,
+        ScrollDirection = ScrollDirection.ToDescriptionString(),
+        PageGap
     });
 }

src/components/BootstrapBlazor.EmbedPDF/EmbedPDF.razor.js

@@ -3,21 +3,26 @@ import EventHandler from "../BootstrapBlazor/modules/event-handler.js"
 import { default as EmbedPDF, DocumentManagerPlugin } from './embedpdf.js'
 import { getTheme, registerBootstrapBlazorModule } from '../BootstrapBlazor/modules/utility.js'
 
-export function init(id, invoke, options) {
+export async function init(id, invoke, options) {
     const el = document.getElementById(id);
     if (el === null) {
         return null;
     }
 
     const target = el.querySelector('.pdf-viewer');
-    const { src, tabBar, theme, lang } = options;
+    const { src, tabBar, theme, lang, currentPage, scrollDirection, pageGap } = options;
     const wasmUrl = `${location.origin}/_content/BootstrapBlazor.EmbedPDF/pdfium.wasm`;
 
     let preference = theme;
     if (preference === 'system') {
         preference = getTheme();
     }
 
+    let currentPageGap = pageGap;
+    if (currentPageGap === 0) {
+        currentPageGap = 20;
+    }
+
     const viewer = EmbedPDF.init({
         type: 'container',
         target: el,
@@ -31,6 +36,10 @@ export function init(id, invoke, options) {
         i18n: {
             defaultLocale: lang,
             fallbackLocale: 'en'
+        },
+        scroll: {
+            defaultStrategy: scrollDirection,
+            defaultPageGap: currentPageGap
         }
     });
 
@@ -39,33 +48,55 @@ export function init(id, invoke, options) {
     });
 
     Data.set(id, { el, invoke, options, viewer });
+
+    const registry = await viewer.registry;
+    const scroll = registry.getPlugin('scroll').provides();
+
+    scroll.onLayoutReady((event) => {
+        scroll.scrollToPage({
+            pageNumber: 5,
+            behavior: 'instant'
+        });
+    });
 }
 
 export async function setUrl(id, url) {
-    if (url) {
-        const pdf = Data.get(id);
-        const { viewer } = pdf;
-
-        if (viewer) {
-            const registry = await viewer.registry;
-            const docManager = registry.getPlugin('document-manager').provides();
-            docManager.openDocumentUrl({
-                url,
-                documentId: getFileName(url),
-                autoActivate: true
-            });
-        }
+    const pdf = Data.get(id);
+    const { viewer } = pdf;
+
+    if (viewer) {
+        const registry = await viewer.registry;
+        const docManager = registry.getPlugin('document-manager').provides();
+        const name = getFileName(url);
+        docManager.openDocumentUrl({
+            url,
+            name,
+            documentId: name,
+            autoActivate: true
+        });
     }
 }
 
 export function setTheme(id, theme) {
     const pdf = Data.get(id);
     const { viewer } = pdf;
+
     if (viewer) {
         viewer.setTheme(theme);
     }
 }
 
+export async function setLocale(id, locale) {
+    const pdf = Data.get(id);
+    const { viewer } = pdf;
+
+    if (viewer) {
+        const registry = await viewer.registry;
+        const i18n = registry.getPlugin('i18n').provides();
+        i18n.setLocale(locale);
+    }
+}
+
 export function dispose(id) {
     const pdf = Data.get(id);
     Data.remove(id);

src/components/BootstrapBlazor.EmbedPDF/EmbedPDFScrollDirection.cs

@@ -0,0 +1,25 @@
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 滚动方向枚举
+/// </summary>
+public enum EmbedPDFScrollDirection
+{
+    /// <summary>
+    /// 垂直方向
+    /// </summary>
+    [Description("vertical")]
+    Vertical,
+
+    /// <summary>
+    /// 水平方向
+    /// </summary>
+    [Description("Horizontal")]
+    Horizontal
+}