diff --git a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj index 325256b4..155c9517 100644 --- a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj +++ b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj @@ -1,7 +1,7 @@  - 10.0.1-beta06 + 10.0.1-beta07 @@ -17,11 +17,7 @@ - - - - - + diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index a50b4d9e..6d7cc82a 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -8,37 +8,57 @@
- @_docTitle + @_docTitle
- /
+ / +
-
- -
-
-
-
-
-
+
+ +
+
+
+
+ + + +
+
page-actual
+
page-width
+
page-height
+
page-fit
+
auto
+
+
+
+
+
@if (ShowDownload) { -
+
+ } + @if (ShowPrint) + { +
} -
- - - @if (ShowTwoPagesOneViewButton) +
+ +
+ @if (ShowTwoPagesOneView) {
Two pages on view
}
Document properties
- - +
+
} diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index c7e805ca..ad3cfc36 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -25,6 +25,12 @@ public partial class PdfReader [Parameter] public bool ShowDownload { get; set; } = true; + /// + /// 获得/设置 是否显示打印按钮 默认 true 显示 + /// + [Parameter] + public bool ShowPrint { get; set; } = true; + /// /// 获得/设置 是否显示缩略图 默认 true 显示 /// @@ -59,13 +65,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 @@ -86,7 +92,7 @@ public partial class PdfReader public Func? OnPagesLoadedAsync { get; set; } /// - /// 页面初始化回调方法 + /// 页码变化时回调方法 /// [Parameter] public Func? OnPageChangedAsync { get; set; } @@ -109,9 +115,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(); @@ -122,11 +125,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; @@ -134,8 +137,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); @@ -190,7 +191,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 +212,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 +226,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 +246,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 +260,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 +278,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 +306,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 30032f0c..d5421afb 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; } @@ -34,7 +34,6 @@ } .bb-view-icon { - margin: 0 .5rem; padding: .5rem; cursor: pointer; } @@ -43,6 +42,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; @@ -51,6 +64,10 @@ max-width: 300px; } +.bb-view-pagesCount { + padding-inline-end: .5rem; +} + .bb-view-body { flex: 1; min-width: 0; @@ -59,14 +76,14 @@ flex-wrap: nowrap; align-items: center; justify-content: center; - overflow: hidden; + 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; } @@ -74,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; @@ -82,7 +104,7 @@ color: #fff; } -.bb-view-scale { +.bb-view-scale-input { width: 40px; } @@ -94,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; @@ -104,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 +}