diff --git a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj index c93454ea..a734f066 100644 --- a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj +++ b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj @@ -1,7 +1,7 @@  - 10.0.1-beta01 + 10.0.1-beta04 @@ -17,10 +17,13 @@ - + + + + diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index 3f6526c6..080df140 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -21,13 +21,21 @@
-
-
-
+ + + @if (Options.ShowTwoPagesOnViewButton) + { + + + } + + +
} diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index 2a42c5a3..db874128 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -20,6 +20,12 @@ public partial class PdfReader [NotNull] public PdfReaderOptions? Options { get; set; } + /// + /// 获得/设置 更多按钮图标 默认为 null 使用内置图标 + /// + [Parameter] + public string? MoreButtonIcon { get; set; } + private string? ClassString => CssBuilder.Default("bb-pdf-reader") .AddClassFromAttributes(AdditionalAttributes) .Build(); @@ -38,6 +44,8 @@ public partial class PdfReader private uint _currentPage; private string? _url; private string? _currentScale; + private bool _enableTwoPagesOneView; + private string? _twoPagesOneViewIcon; private readonly HashSet AllowedScaleValues = ["page-actual", "page-width", "page-height", "page-fit", "auto"]; @@ -82,6 +90,14 @@ private void SetCurrentScale(string value) } } + private void OnToggleTwoPagesOneView() + { + _enableTwoPagesOneView = !_enableTwoPagesOneView; + Options.EnableTwoPagesOnView = _enableTwoPagesOneView; + + _twoPagesOneViewIcon = _enableTwoPagesOneView ? "fa-solid fa-fw fa-check" : "fa-solid fa-fw"; + } + /// /// /// @@ -96,6 +112,9 @@ protected override void OnParametersSet() Options.CurrentPage = 1; } _docTitle = Path.GetFileName(Options.Url); + + MoreButtonIcon ??= "fa-solid fa-ellipsis-vertical"; + _twoPagesOneViewIcon ??= "fa-solid fa-fw"; } /// @@ -113,6 +132,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) _currentPage = Options.CurrentPage; _url = Options.Url; _currentScale = Options.CurrentScale; + _enableTwoPagesOneView = Options.EnableTwoPagesOnView; } if (_url != Options.Url) @@ -136,6 +156,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender) _currentScale = Options.CurrentScale; await InvokeVoidAsync("scale", Id, _currentScale); } + if (_enableTwoPagesOneView != Options.EnableTwoPagesOnView) + { + _currentScale = Options.CurrentScale; + await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView); + } } /// @@ -147,7 +172,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 }); /// diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index fb26b844..8af80838 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/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; diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index 36ed74a8..1f3be938 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -102,13 +102,25 @@ export function scale(id, scale) { } } +export function setPages(id, enableTowPagesOnView) { + const { el, pdfViewer } = Data.get(id); + if (pdfViewer) { + if (enableTowPagesOnView) { + pdfViewer.spreadMode = 1; + } + else { + pdfViewer.spreadMode = 0; + } + } +} + const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { eventBus.on("pagesinit", async () => { if (options.isFitToPage) { pdfViewer.currentScaleValue = "page-width"; } else { - pdfViewer.currentScaleValue = 1.0; + pdfViewer.currentScaleValue = "page-actual"; } const numPages = pdfViewer.pagesCount; @@ -149,6 +161,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 +183,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 +201,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"); + } } } diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs b/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs index 8dfb1ec3..757dda09 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs @@ -39,6 +39,16 @@ public class PdfReaderOptions /// public bool IsFitToPage { get; set; } + /// + /// 获得/设置 是否显示双页单视图按钮 默认 true 显示 + /// + public bool ShowTwoPagesOnViewButton { get; set; } = true; + + /// + /// 获得/设置 是否启用双页单视图模式 默认 false + /// + public bool EnableTwoPagesOnView { get; set; } + /// /// 页面初始化回调方法 /// @@ -48,4 +58,9 @@ public class PdfReaderOptions /// 页面初始化回调方法 /// public Func? OnPageChangedAsync { get; set; } + + /// + /// 设置双页单视图模式回调方法 + /// + public Func? OnTwoPagesOneViewAsync { get; set; } }