From 16fe32a4187b56bb974d7621d1544c252089f4b9 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 27 Nov 2025 10:03:42 +0800 Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=E5=8E=9F?= =?UTF-8?q?=E7=94=9F=E4=B8=8B=E6=8B=89=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BootstrapBlazor.PdfReader/PdfReader.razor | 28 ++++++++++++++----- .../PdfReader.razor.css | 19 +++++++++++-- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index a50b4d9e..aac526c4 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -17,8 +17,20 @@
-
-
+
+ + + +
+
page-actual
+
page-width
+
page-height
+
page-fit
+
auto
+
+
@@ -28,17 +40,19 @@
}
- - +
+ +
@if (ShowTwoPagesOneViewButton) {
Two pages on view
}
Document properties
- - +
+
} diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index 30032f0c..c57adedd 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css @@ -18,11 +18,11 @@ visibility: hidden; } - .bb-view-toolbar ::deep .btn { + .bb-view-toolbar .btn { --bs-btn-color: #fff; } - .bb-view-toolbar ::deep .dropdown-toggle::after { + .bb-view-toolbar .bb-view-controls .dropdown-toggle::after { content: none; } @@ -43,6 +43,20 @@ color: #6c757d; } + .bb-view-icon .dropdown-toggle-split { + padding-left: 0.25rem; + padding-right: 0.25rem; + } + + .bb-view-icon.btn-group .btn { + --bs-btn-padding-x: 0.5rem; + } + + .bb-view-icon.btn-group .dropdown-toggle-split { + padding-left: 0; + padding-right: 0; + } + .bb-view-subject { white-space: nowrap; display: block; @@ -59,7 +73,6 @@ flex-wrap: nowrap; align-items: center; justify-content: center; - overflow: hidden; } .bb-view-body.fit-page .bb-view-fit-page { From 2fa21f79449c17c44ca221aebcbe05e7249fbdfe Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 27 Nov 2025 11:16:09 +0800 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20FitMode=20?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BootstrapBlazor.PdfReader/PdfReader.razor | 49 ++++++++++--------- .../PdfReader.razor.cs | 35 ++++++------- .../PdfReader.razor.css | 29 ++++++++--- .../PdfReader.razor.js | 18 ++----- .../PdfReaderFitMode.cs | 43 ++++++++++++++++ 5 files changed, 110 insertions(+), 64 deletions(-) create mode 100644 src/components/BootstrapBlazor.PdfReader/PdfReaderFitMode.cs diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index aac526c4..bdccce83 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -8,44 +8,47 @@
- @_docTitle + @_docTitle
- /
+ / +
-
- -
-
-
- - - -
-
page-actual
-
page-width
-
page-height
-
page-fit
-
auto
+
+ +
+
+
+
+ + + +
+
page-actual
+
page-width
+
page-height
+
page-fit
+
auto
+
+
+
-
-
@if (ShowDownload) { -
+
} -
+
- @if (ShowTwoPagesOneViewButton) + @if (ShowTwoPagesOneView) {
Two pages on view
diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index c7e805ca..632e6874 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -59,13 +59,13 @@ public partial class PdfReader /// 获得/设置 是否适配当前页面宽度 默认 false /// [Parameter] - public bool IsFitToPage { get; set; } + public PdfReaderFitMode FitMode { get; set; } /// /// 获得/设置 是否显示双页单视图按钮 默认 true 显示 /// [Parameter] - public bool ShowTwoPagesOneViewButton { get; set; } = true; + public bool ShowTwoPagesOneView { get; set; } = true; /// /// 获得/设置 是否启用双页单视图模式 默认 false @@ -122,11 +122,11 @@ public partial class PdfReader .Build(); private string? ViewBodyString => CssBuilder.Default("bb-view-body") - .AddClass("fit-page", IsFitToPage) + .AddClass("fit-width", FitMode == PdfReaderFitMode.PageHeight) .Build(); private string? _docTitle; - private bool _isFitToPage; + private PdfReaderFitMode _fitMode; private uint _currentPage; private string? _url; private string? _currentScale; @@ -190,7 +190,7 @@ protected override void OnParametersSet() { base.OnParametersSet(); - MoreButtonIcon ??= "fa-solid fa-ellipsis-vertical"; + MoreButtonIcon ??= "fa-solid fa-fw fa-ellipsis-vertical"; _twoPagesOneViewIcon ??= "fa-solid fa-fw"; if (CurrentPage == 0) @@ -211,12 +211,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender) { - _isFitToPage = IsFitToPage; + _fitMode = FitMode; _currentPage = CurrentPage; _url = Url; _currentScale = CurrentScale; _enableTwoPagesOneView = EnableTwoPagesOneView; - _showTwoPagesOneViewButton = ShowTwoPagesOneViewButton; + _showTwoPagesOneViewButton = ShowTwoPagesOneView; } if (_url != Url) @@ -225,10 +225,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender) await InvokeInitAsync(); } - if (_isFitToPage != IsFitToPage) + if (_fitMode != FitMode) { - _isFitToPage = IsFitToPage; - await TriggerFit(_isFitToPage ? "fitToPage" : "fitToWidth"); + _fitMode = FitMode; + await InvokeVoidAsync("setScaleValue", Id, _fitMode.ToDescriptionString()); } if (_currentPage != CurrentPage) { @@ -245,9 +245,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender) _enableTwoPagesOneView = EnableTwoPagesOneView; await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView); } - if (_showTwoPagesOneViewButton != ShowTwoPagesOneViewButton) + if (_showTwoPagesOneViewButton != ShowTwoPagesOneView) { - _showTwoPagesOneViewButton = ShowTwoPagesOneViewButton; + _showTwoPagesOneViewButton = ShowTwoPagesOneView; await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView); } } @@ -259,7 +259,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { Url, - IsFitToPage, + FitMode, EnableThumbnails, TriggerPagesInit = OnPagesInitAsync != null, TriggerPagesLoaded = OnPagesLoadedAsync != null, @@ -277,12 +277,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) /// /// 适应页面宽度 /// - public void FitToPage() => IsFitToPage = true; - - /// - /// 适应文档宽度 - /// - public void FitToWidth() => IsFitToPage = false; + public void SetFitMode(PdfReaderFitMode mode) => FitMode = mode; /// /// 旋转页面方法 @@ -310,8 +305,6 @@ private async Task OnDownload() } } - private Task TriggerFit(string methodName) => InvokeVoidAsync(methodName, Id); - /// /// 页面开始初始化时回调方法 /// diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index c57adedd..d5421afb 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css @@ -34,7 +34,6 @@ } .bb-view-icon { - margin: 0 .5rem; padding: .5rem; cursor: pointer; } @@ -65,6 +64,10 @@ max-width: 300px; } +.bb-view-pagesCount { + padding-inline-end: .5rem; +} + .bb-view-body { flex: 1; min-width: 0; @@ -73,13 +76,14 @@ flex-wrap: nowrap; align-items: center; justify-content: center; + background-color: var(--bb-toolbar-background-color); } - .bb-view-body.fit-page .bb-view-fit-page { + .bb-view-body.fit-width .bb-view-fit-height { display: none; } - .bb-view-body.fit-page .bb-view-fit-width { + .bb-view-body.fit-width .bb-view-fit-width { display: block; } @@ -87,7 +91,12 @@ display: none; } -.bb-view-num, .bb-view-scale { +.bb-view-scale { + display: flex; + align-items: center; +} + +.bb-view-num, .bb-view-scale-input { width: 36px; text-align: center; background-color: #000; @@ -95,7 +104,7 @@ color: #fff; } -.bb-view-scale { +.bb-view-scale-input { width: 40px; } @@ -107,9 +116,13 @@ width: .6px; height: calc(var(--bb-pdf-toolbar-height) / 3); background-color: #777; - margin: 0 1rem; + margin: 0 0.5rem; } + .bb-view-divider + .bb-view-icon { + padding-inline-start: 0; + } + .bb-view-controls { display: flex; align-items: center; @@ -117,6 +130,10 @@ padding: 0 1rem; } + .bb-view-controls .dropdown-toggle { + padding: 7px; + } + .bb-view-main { display: flex; width: 100%; diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index 119f8205..e7b77a5f 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -51,17 +51,10 @@ export async function init(id, invoke, options) { Data.set(id, { el, pdfViewer }); } -export function fitToWidth(id) { +export function setScaleValue(id, value) { const { pdfViewer } = Data.get(id); if (pdfViewer) { - pdfViewer.currentScaleValue = "page-height"; - } -} - -export function fitToPage(id) { - const { pdfViewer } = Data.get(id); - if (pdfViewer) { - pdfViewer.currentScaleValue = "page-width"; + pdfViewer.currentScaleValue = value; } } @@ -118,11 +111,8 @@ const resetTwoPagesOneView = (el, pdfViewer) => { const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { eventBus.on("pagesinit", async () => { - if (options.isFitToPage) { - pdfViewer.currentScaleValue = "page-width"; - } - else { - pdfViewer.currentScaleValue = "page-actual"; + if (options.fitMode) { + pdfViewer.currentScaleValue = fitMode; } const numPages = pdfViewer.pagesCount; diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReaderFitMode.cs b/src/components/BootstrapBlazor.PdfReader/PdfReaderFitMode.cs new file mode 100644 index 00000000..6bf38ae2 --- /dev/null +++ b/src/components/BootstrapBlazor.PdfReader/PdfReaderFitMode.cs @@ -0,0 +1,43 @@ +// 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 or https://argozhang.github.io/ + +using System.ComponentModel; + +namespace BootstrapBlazor.Components; + +/// +/// PdfReader 文档适配模式 +/// +public enum PdfReaderFitMode +{ + /// + /// 页面宽度 + /// + [Description("page-width")] + PageWidth, + + /// + /// 实际大小 + /// + [Description("page-actual")] + PageActual, + + /// + /// 页面高度 + /// + [Description("page-height")] + PageHeight, + + /// + /// 自适应宽高 + /// + [Description("page-fit")] + PageFit, + + /// + /// 自动 + /// + [Description("auto")] + Auto +} From ddef937e644ef79204aa3d01a84c04e4d15e5542 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 27 Nov 2025 11:25:38 +0800 Subject: [PATCH 3/7] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index 632e6874..dbf9ce8a 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -86,7 +86,7 @@ public partial class PdfReader public Func? OnPagesLoadedAsync { get; set; } /// - /// 页面初始化回调方法 + /// 页码变化时回调方法 /// [Parameter] public Func? OnPageChangedAsync { get; set; } From 8471023c523eb13cfa85810e1ecfa5042baf69e4 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 27 Nov 2025 11:25:51 +0800 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E4=B8=8D?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index dbf9ce8a..1d15865b 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -109,9 +109,6 @@ public partial class PdfReader [Parameter] public Func? OnDownloadAsync { get; set; } - [Inject, NotNull] - private DownloadService? DownloadService { get; set; } - private string? ClassString => CssBuilder.Default("bb-pdf-reader") .AddClassFromAttributes(AdditionalAttributes) .Build(); @@ -134,8 +131,6 @@ public partial class PdfReader private bool _showTwoPagesOneViewButton; private string? _twoPagesOneViewIcon; - private readonly HashSet AllowedScaleValues = ["page-actual", "page-width", "page-height", "page-fit", "auto"]; - private string CurrentPageString { get => CurrentPage.ToString(CultureInfo.InvariantCulture); From 1322fff6d0f4f519c57b894dd0c38b12b4cec58c Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 27 Nov 2025 11:26:29 +0800 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=98=AF?= =?UTF-8?q?=E5=90=A6=E6=89=93=E5=8D=B0=E6=8E=A7=E5=88=B6=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BootstrapBlazor.PdfReader/PdfReader.razor | 5 ++++- src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs | 6 ++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index bdccce83..6d7cc82a 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -42,7 +42,10 @@ {
} -
+ @if (ShowPrint) + { +
+ }