Skip to content

Commit bb3597b

Browse files
ArgoZhangArgoZhang
authored
feat(PdfReader): add ShowPrint parameter (#729)
* refactor: 使用原生下拉框 * feat: 增加 FitMode 功能 * doc: 更新文档 * refactor: 移除不使用的代码 * feat: 增加是否打印控制功能 * chore: bump version10.0.1-beta07 * chore: 更新依赖
1 parent dffb489 commit bb3597b

6 files changed

Lines changed: 147 additions & 74 deletions

File tree

‎src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>10.0.1-beta06</Version>
4+
<Version>10.0.1-beta07</Version>
55
</PropertyGroup>
66

77
<PropertyGroup>
@@ -17,11 +17,7 @@
1717
</ItemGroup>
1818

1919
<ItemGroup>
20-
<!--<PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />-->
21-
</ItemGroup>
22-
23-
<ItemGroup>
24-
<ProjectReference Include="..\..\..\..\BootstrapBlazor\src\BootstrapBlazor\BootstrapBlazor.csproj" />
20+
<PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
2521
</ItemGroup>
2622

2723
<ItemGroup>

‎src/components/BootstrapBlazor.PdfReader/PdfReader.razor‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,57 @@
88
<div class="bb-view-toolbar init">
99
<div class="bb-view-title">
1010
<div class="bb-view-icon bb-view-bar"><i class="fa-solid fa-bars"></i></div>
11-
<span class="bb-view-subject d-none d-sm-block">@_docTitle</span>
11+
<span class="bb-view-subject">@_docTitle</span>
1212
</div>
1313
<div class="@ViewBodyString">
14-
<input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span><div class="bb-view-pagesCount"></div>
14+
<input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span>
15+
<div class="bb-view-pagesCount"></div>
1516
<div class="bb-view-divider"></div>
16-
<div class="bb-view-icon bb-page-minus"><i class="fa-solid fa-minus"></i></div>
17-
<input type="text" class="bb-view-scale" @bind="CurrentScaleString" />
18-
<div class="bb-view-icon bb-page-plus"><i class="fa-solid fa-plus"></i></div>
19-
<div class="bb-view-divider"></div>
20-
<div class="bb-view-icon bb-view-fit-page" @onclick="FitToPage"><i class="fa-solid fa-arrows-left-right-to-line fa-rotate-90"></i></div>
21-
<div class="bb-view-icon bb-view-fit-width" @onclick="FitToWidth"><i class="fa-solid fa-arrows-left-right-to-line"></i></div>
22-
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateLeft"><i class="fa-solid fa-rotate-left"></i></div>
23-
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateRight"><i class="fa-solid fa-rotate-right"></i></div>
17+
<div class="bb-view-icon bb-page-minus"><i class="fa-solid fa-fw fa-minus"></i></div>
18+
<input type="text" class="bb-view-scale-input" @bind="CurrentScaleString" />
19+
<div class="bb-view-icon bb-page-plus"><i class="fa-solid fa-fw fa-plus"></i></div>
20+
<div class="bb-view-scale">
21+
<div class="bb-view-divider"></div>
22+
<div class="bb-view-icon btn-group">
23+
<button type="button" class="btn bb-view-fit-height" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line fa-rotate-90"></i></button>
24+
<button type="button" class="btn bb-view-fit-width" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line"></i></button>
25+
<button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
26+
<span class="visually-hidden">Toggle Dropdown</span>
27+
</button>
28+
<div class="dropdown-menu dropdown-menu-end">
29+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageActual)">page-actual</div>
30+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)">page-width</div>
31+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)">page-height</div>
32+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageFit)">page-fit</div>
33+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.Auto)">auto</div>
34+
</div>
35+
</div>
36+
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateLeft"><i class="fa-solid fa-fw fa-rotate-left"></i></div>
37+
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateRight"><i class="fa-solid fa-fw fa-rotate-right"></i></div>
38+
</div>
2439
</div>
2540
<div class="bb-view-controls">
2641
@if (ShowDownload)
2742
{
28-
<div class="bb-view-icon bb-view-download" @onclick="OnDownload"><i class="fa-solid fa-arrow-right-to-bracket fa-rotate-90"></i></div>
43+
<div class="bb-view-icon bb-view-download" @onclick="OnDownload"><i class="fa-solid fa-fw fa-arrow-right-to-bracket fa-rotate-90"></i></div>
44+
}
45+
@if (ShowPrint)
46+
{
47+
<div class="bb-view-icon bb-view-print"><i class="fa-solid fa-fw fa-print"></i></div>
2948
}
30-
<div class="bb-view-icon bb-view-print"><i class="fa-solid fa-print"></i></div>
31-
<Dropdown TValue="string" Color="Color.None" SkipValidate="true" ShowLabel="false"
32-
IsPopover="false" MenuAlignment="Alignment.Right" Icon="@MoreButtonIcon">
33-
<ItemsTemplate>
34-
@if (ShowTwoPagesOneViewButton)
49+
<div class="dropdown">
50+
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
51+
<i class="@MoreButtonIcon"></i>
52+
</button>
53+
<div class="dropdown-menu shadow dropdown-menu-end">
54+
@if (ShowTwoPagesOneView)
3555
{
3656
<div class="dropdown-item dropdown-item-pages" @onclick="OnToggleTwoPagesOneView"><i class="@_twoPagesOneViewIcon"></i><span>Two pages on view</span></div>
3757
<Divider></Divider>
3858
}
3959
<div class="dropdown-item"><i class="fa-solid fa-fw"></i><span>Document properties</span></div>
40-
</ItemsTemplate>
41-
</Dropdown>
60+
</div>
61+
</div>
4262
</div>
4363
</div>
4464
}

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

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ public partial class PdfReader
2525
[Parameter]
2626
public bool ShowDownload { get; set; } = true;
2727

28+
/// <summary>
29+
/// 获得/设置 是否显示打印按钮 默认 true 显示
30+
/// </summary>
31+
[Parameter]
32+
public bool ShowPrint { get; set; } = true;
33+
2834
/// <summary>
2935
/// 获得/设置 是否显示缩略图 默认 true 显示
3036
/// </summary>
@@ -59,13 +65,13 @@ public partial class PdfReader
5965
/// 获得/设置 是否适配当前页面宽度 默认 false
6066
/// </summary>
6167
[Parameter]
62-
public bool IsFitToPage { get; set; }
68+
public PdfReaderFitMode FitMode { get; set; }
6369

6470
/// <summary>
6571
/// 获得/设置 是否显示双页单视图按钮 默认 true 显示
6672
/// </summary>
6773
[Parameter]
68-
public bool ShowTwoPagesOneViewButton { get; set; } = true;
74+
public bool ShowTwoPagesOneView { get; set; } = true;
6975

7076
/// <summary>
7177
/// 获得/设置 是否启用双页单视图模式 默认 false
@@ -86,7 +92,7 @@ public partial class PdfReader
8692
public Func<int, Task>? OnPagesLoadedAsync { get; set; }
8793

8894
/// <summary>
89-
/// 页面初始化回调方法
95+
/// 页码变化时回调方法
9096
/// </summary>
9197
[Parameter]
9298
public Func<uint, Task>? OnPageChangedAsync { get; set; }
@@ -109,9 +115,6 @@ public partial class PdfReader
109115
[Parameter]
110116
public Func<Task>? OnDownloadAsync { get; set; }
111117

112-
[Inject, NotNull]
113-
private DownloadService? DownloadService { get; set; }
114-
115118
private string? ClassString => CssBuilder.Default("bb-pdf-reader")
116119
.AddClassFromAttributes(AdditionalAttributes)
117120
.Build();
@@ -122,20 +125,18 @@ public partial class PdfReader
122125
.Build();
123126

124127
private string? ViewBodyString => CssBuilder.Default("bb-view-body")
125-
.AddClass("fit-page", IsFitToPage)
128+
.AddClass("fit-width", FitMode == PdfReaderFitMode.PageHeight)
126129
.Build();
127130

128131
private string? _docTitle;
129-
private bool _isFitToPage;
132+
private PdfReaderFitMode _fitMode;
130133
private uint _currentPage;
131134
private string? _url;
132135
private string? _currentScale;
133136
private bool _enableTwoPagesOneView;
134137
private bool _showTwoPagesOneViewButton;
135138
private string? _twoPagesOneViewIcon;
136139

137-
private readonly HashSet<string> AllowedScaleValues = ["page-actual", "page-width", "page-height", "page-fit", "auto"];
138-
139140
private string CurrentPageString
140141
{
141142
get => CurrentPage.ToString(CultureInfo.InvariantCulture);
@@ -190,7 +191,7 @@ protected override void OnParametersSet()
190191
{
191192
base.OnParametersSet();
192193

193-
MoreButtonIcon ??= "fa-solid fa-ellipsis-vertical";
194+
MoreButtonIcon ??= "fa-solid fa-fw fa-ellipsis-vertical";
194195
_twoPagesOneViewIcon ??= "fa-solid fa-fw";
195196

196197
if (CurrentPage == 0)
@@ -211,12 +212,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
211212

212213
if (firstRender)
213214
{
214-
_isFitToPage = IsFitToPage;
215+
_fitMode = FitMode;
215216
_currentPage = CurrentPage;
216217
_url = Url;
217218
_currentScale = CurrentScale;
218219
_enableTwoPagesOneView = EnableTwoPagesOneView;
219-
_showTwoPagesOneViewButton = ShowTwoPagesOneViewButton;
220+
_showTwoPagesOneViewButton = ShowTwoPagesOneView;
220221
}
221222

222223
if (_url != Url)
@@ -225,10 +226,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
225226
await InvokeInitAsync();
226227
}
227228

228-
if (_isFitToPage != IsFitToPage)
229+
if (_fitMode != FitMode)
229230
{
230-
_isFitToPage = IsFitToPage;
231-
await TriggerFit(_isFitToPage ? "fitToPage" : "fitToWidth");
231+
_fitMode = FitMode;
232+
await InvokeVoidAsync("setScaleValue", Id, _fitMode.ToDescriptionString());
232233
}
233234
if (_currentPage != CurrentPage)
234235
{
@@ -245,9 +246,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
245246
_enableTwoPagesOneView = EnableTwoPagesOneView;
246247
await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
247248
}
248-
if (_showTwoPagesOneViewButton != ShowTwoPagesOneViewButton)
249+
if (_showTwoPagesOneViewButton != ShowTwoPagesOneView)
249250
{
250-
_showTwoPagesOneViewButton = ShowTwoPagesOneViewButton;
251+
_showTwoPagesOneViewButton = ShowTwoPagesOneView;
251252
await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
252253
}
253254
}
@@ -259,7 +260,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
259260
protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
260261
{
261262
Url,
262-
IsFitToPage,
263+
FitMode,
263264
EnableThumbnails,
264265
TriggerPagesInit = OnPagesInitAsync != null,
265266
TriggerPagesLoaded = OnPagesLoadedAsync != null,
@@ -277,12 +278,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
277278
/// <summary>
278279
/// 适应页面宽度
279280
/// </summary>
280-
public void FitToPage() => IsFitToPage = true;
281-
282-
/// <summary>
283-
/// 适应文档宽度
284-
/// </summary>
285-
public void FitToWidth() => IsFitToPage = false;
281+
public void SetFitMode(PdfReaderFitMode mode) => FitMode = mode;
286282

287283
/// <summary>
288284
/// 旋转页面方法
@@ -310,8 +306,6 @@ private async Task OnDownload()
310306
}
311307
}
312308

313-
private Task TriggerFit(string methodName) => InvokeVoidAsync(methodName, Id);
314-
315309
/// <summary>
316310
/// 页面开始初始化时回调方法
317311
/// </summary>

‎src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
visibility: hidden;
1919
}
2020

21-
.bb-view-toolbar ::deep .btn {
21+
.bb-view-toolbar .btn {
2222
--bs-btn-color: #fff;
2323
}
2424

25-
.bb-view-toolbar ::deep .dropdown-toggle::after {
25+
.bb-view-toolbar .bb-view-controls .dropdown-toggle::after {
2626
content: none;
2727
}
2828

@@ -34,7 +34,6 @@
3434
}
3535

3636
.bb-view-icon {
37-
margin: 0 .5rem;
3837
padding: .5rem;
3938
cursor: pointer;
4039
}
@@ -43,6 +42,20 @@
4342
color: #6c757d;
4443
}
4544

45+
.bb-view-icon .dropdown-toggle-split {
46+
padding-left: 0.25rem;
47+
padding-right: 0.25rem;
48+
}
49+
50+
.bb-view-icon.btn-group .btn {
51+
--bs-btn-padding-x: 0.5rem;
52+
}
53+
54+
.bb-view-icon.btn-group .dropdown-toggle-split {
55+
padding-left: 0;
56+
padding-right: 0;
57+
}
58+
4659
.bb-view-subject {
4760
white-space: nowrap;
4861
display: block;
@@ -51,6 +64,10 @@
5164
max-width: 300px;
5265
}
5366

67+
.bb-view-pagesCount {
68+
padding-inline-end: .5rem;
69+
}
70+
5471
.bb-view-body {
5572
flex: 1;
5673
min-width: 0;
@@ -59,30 +76,35 @@
5976
flex-wrap: nowrap;
6077
align-items: center;
6178
justify-content: center;
62-
overflow: hidden;
79+
background-color: var(--bb-toolbar-background-color);
6380
}
6481

65-
.bb-view-body.fit-page .bb-view-fit-page {
82+
.bb-view-body.fit-width .bb-view-fit-height {
6683
display: none;
6784
}
6885

69-
.bb-view-body.fit-page .bb-view-fit-width {
86+
.bb-view-body.fit-width .bb-view-fit-width {
7087
display: block;
7188
}
7289

7390
.bb-view-body .bb-view-fit-width {
7491
display: none;
7592
}
7693

77-
.bb-view-num, .bb-view-scale {
94+
.bb-view-scale {
95+
display: flex;
96+
align-items: center;
97+
}
98+
99+
.bb-view-num, .bb-view-scale-input {
78100
width: 36px;
79101
text-align: center;
80102
background-color: #000;
81103
border: none;
82104
color: #fff;
83105
}
84106

85-
.bb-view-scale {
107+
.bb-view-scale-input {
86108
width: 40px;
87109
}
88110

@@ -94,16 +116,24 @@
94116
width: .6px;
95117
height: calc(var(--bb-pdf-toolbar-height) / 3);
96118
background-color: #777;
97-
margin: 0 1rem;
119+
margin: 0 0.5rem;
98120
}
99121

122+
.bb-view-divider + .bb-view-icon {
123+
padding-inline-start: 0;
124+
}
125+
100126
.bb-view-controls {
101127
display: flex;
102128
align-items: center;
103129
justify-content: center;
104130
padding: 0 1rem;
105131
}
106132

133+
.bb-view-controls .dropdown-toggle {
134+
padding: 7px;
135+
}
136+
107137
.bb-view-main {
108138
display: flex;
109139
width: 100%;

0 commit comments

Comments
 (0)