Skip to content

Commit 5557e16

Browse files
ArgoZhangArgoZhang
committed
refactor: 增加缩略图功能
1 parent f3483f1 commit 5557e16

5 files changed

Lines changed: 113 additions & 81 deletions

File tree

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,15 @@
3939
</div>
4040
</div>
4141
}
42-
@if (Options.ShowThumbnails)
43-
{
44-
<div class="bb-view-thumbnails"></div>
45-
}
46-
<div class="bb-view-container">
47-
<div class="pdfViewer"></div>
42+
<div class="bb-view-main">
43+
@if (Options.EnableThumbnails)
44+
{
45+
<div class="bb-view-thumbnails"></div>
46+
}
47+
<div class="bb-view-content">
48+
<div class="bb-view-container">
49+
<div class="pdfViewer"></div>
50+
</div>
51+
</div>
4852
</div>
4953
</div>

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
namespace BootstrapBlazor.Components;
99

1010
/// <summary>
11-
/// Blazor Pdf Reader PDF 阅读器 组件
11+
/// Blazor Pdf Reader PDF 阅读器 组件
1212
/// </summary>
1313
[JSModuleAutoLoader("./_content/BootstrapBlazor.PdfReader/PdfReader.razor.js", JSObjectReference = true)]
1414
public partial class PdfReader
@@ -77,14 +77,12 @@ private void SetCurrentScale(string value)
7777
}
7878
else if (float.TryParse(value.TrimEnd("%"), out var v))
7979
{
80-
if (v > 500)
80+
v = v switch
8181
{
82-
v = 500;
83-
}
84-
else if (v < 25)
85-
{
86-
v = 25;
87-
}
82+
> 500 => 500,
83+
< 25 => 25,
84+
_ => v
85+
};
8886

8987
Options.CurrentScale = v.ToString(CultureInfo.InvariantCulture);
9088
}
@@ -171,6 +169,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
171169
{
172170
Options.Url,
173171
Options.IsFitToPage,
172+
Options.EnableThumbnails,
174173
TriggerPagesInit = Options.OnPagesInitAsync != null,
175174
TriggerPagesLoaded = Options.OnPagesLoadedAsync != null,
176175
TriggerPageChanged = Options.OnPageChangedAsync != null,

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

Lines changed: 62 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,6 @@
66
height: calc(var(--bb-pdf-view-height) + var(--bb-pdf-toolbar-height));
77
}
88

9-
.bb-view-thumbnails {
10-
position: absolute;
11-
top: var(--bb-pdf-toolbar-height);
12-
left: 0;
13-
bottom: 0;
14-
width: 300px;
15-
overflow: auto;
16-
z-index: 5;
17-
background-color: #28292a;
18-
padding: 1rem 0;
19-
}
20-
21-
::deep .bb-view-thumbnail-item {
22-
display: block;
23-
text-align: center;
24-
}
25-
26-
::deep .bb-view-thumbnail-item:not(:last-child) {
27-
margin-block-end: 1rem;
28-
}
29-
30-
::deep .bb-view-thumbnail-item img {
31-
width: 42%;
32-
}
33-
349
.bb-view-toolbar {
3510
height: var(--bb-pdf-toolbar-height);
3611
background-color: var(--bb-toolbar-background-color);
@@ -39,17 +14,17 @@
3914
color: #fff;
4015
}
4116

42-
.bb-view-toolbar.init > div {
43-
visibility: hidden;
44-
}
17+
.bb-view-toolbar.init > div {
18+
visibility: hidden;
19+
}
4520

46-
.bb-view-toolbar ::deep .btn {
47-
--bs-btn-color: #fff;
48-
}
21+
.bb-view-toolbar ::deep .btn {
22+
--bs-btn-color: #fff;
23+
}
4924

50-
.bb-view-toolbar ::deep .dropdown-toggle::after {
51-
content: none;
52-
}
25+
.bb-view-toolbar ::deep .dropdown-toggle::after {
26+
content: none;
27+
}
5328

5429
.bb-view-title {
5530
display: flex;
@@ -64,9 +39,9 @@
6439
cursor: pointer;
6540
}
6641

67-
.bb-view-icon.disabled {
68-
color: #6c757d;
69-
}
42+
.bb-view-icon.disabled {
43+
color: #6c757d;
44+
}
7045

7146
.bb-view-bar {
7247
margin-inline-end: 2rem;
@@ -89,17 +64,17 @@
8964
justify-content: center;
9065
}
9166

92-
.bb-view-body.fit-page .bb-view-fit-page {
93-
display: none;
94-
}
67+
.bb-view-body.fit-page .bb-view-fit-page {
68+
display: none;
69+
}
9570

96-
.bb-view-body.fit-page .bb-view-fit-width {
97-
display: block;
98-
}
71+
.bb-view-body.fit-page .bb-view-fit-width {
72+
display: block;
73+
}
9974

100-
.bb-view-body .bb-view-fit-width {
101-
display: none;
102-
}
75+
.bb-view-body .bb-view-fit-width {
76+
display: none;
77+
}
10378

10479
.bb-view-num, .bb-view-scale {
10580
width: 36px;
@@ -131,10 +106,49 @@
131106
padding: 0 1rem;
132107
}
133108

109+
.bb-view-main {
110+
display: flex;
111+
width: 100%;
112+
height: var(--bb-pdf-view-height);
113+
overflow: hidden;
114+
}
115+
116+
.bb-view-thumbnails {
117+
flex-basis: 0;
118+
overflow: auto;
119+
background-color: #28292a;
120+
padding: 1rem 0;
121+
transition: flex-basis .3s linear;
122+
}
123+
124+
.bb-view-thumbnails.show {
125+
flex-basis: 300px;
126+
}
127+
128+
::deep .bb-view-thumbnail-item {
129+
display: block;
130+
text-align: center;
131+
}
132+
133+
::deep .bb-view-thumbnail-item:not(:last-child) {
134+
margin-block-end: 1rem;
135+
}
136+
137+
::deep .bb-view-thumbnail-item img {
138+
width: 126px;
139+
}
140+
141+
.bb-view-content {
142+
position: relative;
143+
flex: 1 1 auto;
144+
min-width: 0;
145+
width: 1%;
146+
height: var(--bb-pdf-view-height);
147+
}
148+
134149
.bb-view-container {
135150
overflow: auto;
136151
position: absolute;
137152
background-color: #000;
138-
width: 100%;
139-
height: var(--bb-pdf-view-height);
153+
inset: 0;
140154
}

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

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -140,18 +140,20 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
140140
});
141141

142142
eventBus.on("pagesloaded", async e => {
143-
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
144-
pdfViewer.getPagesOverview().map(async (p, i) => {
145-
var page = await pdfViewer.pdfDocument.getPage(i + 1);
146-
var canvas = await makeThumb(page);
147-
var img = document.createElement("img");
148-
img.src = canvas.toDataURL();
149-
150-
var item = document.createElement("div");
151-
item.classList.add("bb-view-thumbnail-item");
152-
item.appendChild(img);
153-
thumbnailsContainer.appendChild(item);
154-
});
143+
if (options.enableThumbnails) {
144+
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
145+
pdfViewer.getPagesOverview().map(async (p, i) => {
146+
const page = await pdfViewer.pdfDocument.getPage(i + 1);
147+
const canvas = await makeThumb(page);
148+
const img = document.createElement("img");
149+
img.src = canvas.toDataURL();
150+
151+
const item = document.createElement("div");
152+
item.classList.add("bb-view-thumbnail-item");
153+
item.appendChild(img);
154+
thumbnailsContainer.appendChild(item);
155+
});
156+
}
155157

156158
if (options.triggerPagesLoaded === true) {
157159
await invoke.invokeMethodAsync("PagesLoaded", e.pagesCount);
@@ -192,6 +194,14 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
192194
}
193195
});
194196
}
197+
198+
const thumbnailsToggle = el.querySelector(".bb-view-bar");
199+
if (thumbnailsToggle) {
200+
EventHandler.on(thumbnailsToggle, "click", e => {
201+
const thumbnailsEl = el.querySelector(".bb-view-thumbnails");
202+
thumbnailsEl.classList.toggle("show");
203+
});
204+
}
195205
}
196206

197207
const updateScale = (pdfViewer, button, rate) => {
@@ -215,15 +225,15 @@ const updateScale = (pdfViewer, button, rate) => {
215225

216226
const makeThumb = page => {
217227
const outputScale = window.devicePixelRatio || 1;
218-
var vp = page.getViewport({ scale: 1 });
219-
var canvas = document.createElement("canvas");
220-
var scalesize = 1;
221-
canvas.width = vp.width * scalesize * outputScale;
222-
canvas.height = vp.height * scalesize * outputScale;
228+
const vp = page.getViewport({ scale: 1 });
229+
const canvas = document.createElement("canvas");
230+
const scaleSize = 1;
231+
canvas.width = vp.width * scaleSize * outputScale;
232+
canvas.height = vp.height * scaleSize * outputScale;
223233

224234
return page.render({
225235
canvasContext: canvas.getContext("2d"),
226-
viewport: page.getViewport({ scale: scalesize * outputScale })
236+
viewport: page.getViewport({ scale: scaleSize * outputScale })
227237
}).promise.then(function () {
228238
return canvas;
229239
})
@@ -247,5 +257,10 @@ export function dispose(id) {
247257
if (towPagesOneView) {
248258
EventHandler.off(towPagesOneView, "click");
249259
}
260+
261+
const thumbnailsToggle = el.querySelector(".bb-view-bar");
262+
if(thumbnailsToggle) {
263+
EventHandler.off(thumbnailsToggle, "click");
264+
}
250265
}
251266
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ public class PdfReaderOptions
1717
/// <summary>
1818
/// 获得/设置 是否显示缩略图 默认 true 显示
1919
/// </summary>
20-
public bool ShowThumbnails { get; set; } = true;
20+
public bool EnableThumbnails { get; set; } = true;
2121

2222
/// <summary>
2323
/// 获得/设置 PDF 文档路径

0 commit comments

Comments
 (0)