From f3483f1b20de80d8b3efa48f8bb33ad58bd5233a Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 26 Nov 2025 13:00:10 +0800 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=BC=A9?= =?UTF-8?q?=E7=95=A5=E5=9B=BE=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 | 4 +++ .../PdfReader.razor.cs | 20 +++++++++-- .../PdfReader.razor.css | 25 +++++++++++++ .../PdfReader.razor.js | 35 +++++++++++++++++++ .../PdfReaderOptions.cs | 12 ++++++- 5 files changed, 92 insertions(+), 4 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index 080df140..f71fdee1 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -39,6 +39,10 @@ } + @if (Options.ShowThumbnails) + { +
+ }
diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index db874128..897cad89 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -171,7 +171,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { Options.Url, Options.IsFitToPage, - TriggerPagesInit = Options.OnInitAsync != null, + TriggerPagesInit = Options.OnPagesInitAsync != null, + TriggerPagesLoaded = Options.OnPagesLoadedAsync != null, TriggerPageChanged = Options.OnPageChangedAsync != null, TriggerTowPagesOnViewChanged = Options.OnTwoPagesOneViewAsync != null }); @@ -220,9 +221,22 @@ public async Task RotateRight() [JSInvokable] public async Task PagesInit(int pagesCount) { - if (Options.OnInitAsync != null) + if (Options.OnPagesInitAsync != null) { - await Options.OnInitAsync(pagesCount); + await Options.OnPagesInitAsync(pagesCount); + } + } + + /// + /// 页面加载完毕时回调方法 + /// + /// + [JSInvokable] + public async Task PagesLoaded(int pagesCount) + { + if (Options.OnPagesLoadedAsync != null) + { + await Options.OnPagesLoadedAsync(pagesCount); } } diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index 8af80838..479f5cb7 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css @@ -6,6 +6,31 @@ height: calc(var(--bb-pdf-view-height) + var(--bb-pdf-toolbar-height)); } +.bb-view-thumbnails { + position: absolute; + top: var(--bb-pdf-toolbar-height); + left: 0; + bottom: 0; + width: 300px; + overflow: auto; + z-index: 5; + background-color: #28292a; + padding: 1rem 0; +} + +::deep .bb-view-thumbnail-item { + display: block; + text-align: center; +} + + ::deep .bb-view-thumbnail-item:not(:last-child) { + margin-block-end: 1rem; + } + + ::deep .bb-view-thumbnail-item img { + width: 42%; + } + .bb-view-toolbar { height: var(--bb-pdf-toolbar-height); background-color: var(--bb-toolbar-background-color); diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index 1f3be938..f99e11ab 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -139,6 +139,25 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { } }); + eventBus.on("pagesloaded", async e => { + const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); + pdfViewer.getPagesOverview().map(async (p, i) => { + var page = await pdfViewer.pdfDocument.getPage(i + 1); + var canvas = await makeThumb(page); + var img = document.createElement("img"); + img.src = canvas.toDataURL(); + + var item = document.createElement("div"); + item.classList.add("bb-view-thumbnail-item"); + item.appendChild(img); + thumbnailsContainer.appendChild(item); + }); + + if (options.triggerPagesLoaded === true) { + await invoke.invokeMethodAsync("PagesLoaded", e.pagesCount); + } + }) + eventBus.on("pagechanging", async evt => { const page = evt.pageNumber; const pageNumberEl = el.querySelector(".bb-view-num"); @@ -194,6 +213,22 @@ const updateScale = (pdfViewer, button, rate) => { pdfViewer.currentScaleValue = v / 100; } +const makeThumb = page => { + const outputScale = window.devicePixelRatio || 1; + var vp = page.getViewport({ scale: 1 }); + var canvas = document.createElement("canvas"); + var scalesize = 1; + canvas.width = vp.width * scalesize * outputScale; + canvas.height = vp.height * scalesize * outputScale; + + return page.render({ + canvasContext: canvas.getContext("2d"), + viewport: page.getViewport({ scale: scalesize * outputScale }) + }).promise.then(function () { + return canvas; + }) +} + export function dispose(id) { Data.remove(id); diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs b/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs index 757dda09..b2f88413 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs @@ -14,6 +14,11 @@ public class PdfReaderOptions /// public bool ShowToolbar { get; set; } = true; + /// + /// 获得/设置 是否显示缩略图 默认 true 显示 + /// + public bool ShowThumbnails { get; set; } = true; + /// /// 获得/设置 PDF 文档路径 /// @@ -52,7 +57,12 @@ public class PdfReaderOptions /// /// 页面初始化回调方法 /// - public Func? OnInitAsync { get; set; } + public Func? OnPagesInitAsync { get; set; } + + /// + /// 页面加载完毕回调方法 + /// + public Func? OnPagesLoadedAsync { get; set; } /// /// 页面初始化回调方法 From 5557e16e2bd4859dbb35ed3b6cc241fe26e5ee2c Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 26 Nov 2025 13:46:18 +0800 Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E7=BC=A9?= =?UTF-8?q?=E7=95=A5=E5=9B=BE=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 | 16 ++- .../PdfReader.razor.cs | 15 ++- .../PdfReader.razor.css | 110 ++++++++++-------- .../PdfReader.razor.js | 51 +++++--- .../PdfReaderOptions.cs | 2 +- 5 files changed, 113 insertions(+), 81 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index f71fdee1..97c29df2 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -39,11 +39,15 @@ } - @if (Options.ShowThumbnails) - { -
- } -
-
+
+ @if (Options.EnableThumbnails) + { +
+ } +
+
+
+
+
diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index 897cad89..fc5e16c1 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components; /// -/// Blazor Pdf Reader PDF 阅读器 组件 +/// Blazor Pdf Reader PDF 阅读器 组件 /// [JSModuleAutoLoader("./_content/BootstrapBlazor.PdfReader/PdfReader.razor.js", JSObjectReference = true)] public partial class PdfReader @@ -77,14 +77,12 @@ private void SetCurrentScale(string value) } else if (float.TryParse(value.TrimEnd("%"), out var v)) { - if (v > 500) + v = v switch { - v = 500; - } - else if (v < 25) - { - v = 25; - } + > 500 => 500, + < 25 => 25, + _ => v + }; Options.CurrentScale = v.ToString(CultureInfo.InvariantCulture); } @@ -171,6 +169,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { Options.Url, Options.IsFitToPage, + Options.EnableThumbnails, TriggerPagesInit = Options.OnPagesInitAsync != null, TriggerPagesLoaded = Options.OnPagesLoadedAsync != null, TriggerPageChanged = Options.OnPageChangedAsync != null, diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index 479f5cb7..e6c85590 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css @@ -6,31 +6,6 @@ height: calc(var(--bb-pdf-view-height) + var(--bb-pdf-toolbar-height)); } -.bb-view-thumbnails { - position: absolute; - top: var(--bb-pdf-toolbar-height); - left: 0; - bottom: 0; - width: 300px; - overflow: auto; - z-index: 5; - background-color: #28292a; - padding: 1rem 0; -} - -::deep .bb-view-thumbnail-item { - display: block; - text-align: center; -} - - ::deep .bb-view-thumbnail-item:not(:last-child) { - margin-block-end: 1rem; - } - - ::deep .bb-view-thumbnail-item img { - width: 42%; - } - .bb-view-toolbar { height: var(--bb-pdf-toolbar-height); background-color: var(--bb-toolbar-background-color); @@ -39,17 +14,17 @@ color: #fff; } - .bb-view-toolbar.init > div { - visibility: hidden; - } +.bb-view-toolbar.init > div { + visibility: hidden; +} - .bb-view-toolbar ::deep .btn { - --bs-btn-color: #fff; - } +.bb-view-toolbar ::deep .btn { + --bs-btn-color: #fff; +} - .bb-view-toolbar ::deep .dropdown-toggle::after { - content: none; - } +.bb-view-toolbar ::deep .dropdown-toggle::after { + content: none; +} .bb-view-title { display: flex; @@ -64,9 +39,9 @@ cursor: pointer; } - .bb-view-icon.disabled { - color: #6c757d; - } +.bb-view-icon.disabled { + color: #6c757d; +} .bb-view-bar { margin-inline-end: 2rem; @@ -89,17 +64,17 @@ justify-content: center; } - .bb-view-body.fit-page .bb-view-fit-page { - display: none; - } +.bb-view-body.fit-page .bb-view-fit-page { + display: none; +} - .bb-view-body.fit-page .bb-view-fit-width { - display: block; - } +.bb-view-body.fit-page .bb-view-fit-width { + display: block; +} - .bb-view-body .bb-view-fit-width { - display: none; - } +.bb-view-body .bb-view-fit-width { + display: none; +} .bb-view-num, .bb-view-scale { width: 36px; @@ -131,10 +106,49 @@ padding: 0 1rem; } +.bb-view-main { + display: flex; + width: 100%; + height: var(--bb-pdf-view-height); + overflow: hidden; +} + +.bb-view-thumbnails { + flex-basis: 0; + overflow: auto; + background-color: #28292a; + padding: 1rem 0; + transition: flex-basis .3s linear; +} + +.bb-view-thumbnails.show { + flex-basis: 300px; +} + +::deep .bb-view-thumbnail-item { + display: block; + text-align: center; +} + +::deep .bb-view-thumbnail-item:not(:last-child) { + margin-block-end: 1rem; +} + +::deep .bb-view-thumbnail-item img { + width: 126px; +} + +.bb-view-content { + position: relative; + flex: 1 1 auto; + min-width: 0; + width: 1%; + height: var(--bb-pdf-view-height); +} + .bb-view-container { overflow: auto; position: absolute; background-color: #000; - width: 100%; - height: var(--bb-pdf-view-height); + inset: 0; } diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index f99e11ab..b7e5e9aa 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -140,18 +140,20 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { }); eventBus.on("pagesloaded", async e => { - const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); - pdfViewer.getPagesOverview().map(async (p, i) => { - var page = await pdfViewer.pdfDocument.getPage(i + 1); - var canvas = await makeThumb(page); - var img = document.createElement("img"); - img.src = canvas.toDataURL(); - - var item = document.createElement("div"); - item.classList.add("bb-view-thumbnail-item"); - item.appendChild(img); - thumbnailsContainer.appendChild(item); - }); + if (options.enableThumbnails) { + const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); + pdfViewer.getPagesOverview().map(async (p, i) => { + const page = await pdfViewer.pdfDocument.getPage(i + 1); + const canvas = await makeThumb(page); + const img = document.createElement("img"); + img.src = canvas.toDataURL(); + + const item = document.createElement("div"); + item.classList.add("bb-view-thumbnail-item"); + item.appendChild(img); + thumbnailsContainer.appendChild(item); + }); + } if (options.triggerPagesLoaded === true) { await invoke.invokeMethodAsync("PagesLoaded", e.pagesCount); @@ -192,6 +194,14 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { } }); } + + const thumbnailsToggle = el.querySelector(".bb-view-bar"); + if (thumbnailsToggle) { + EventHandler.on(thumbnailsToggle, "click", e => { + const thumbnailsEl = el.querySelector(".bb-view-thumbnails"); + thumbnailsEl.classList.toggle("show"); + }); + } } const updateScale = (pdfViewer, button, rate) => { @@ -215,15 +225,15 @@ const updateScale = (pdfViewer, button, rate) => { const makeThumb = page => { const outputScale = window.devicePixelRatio || 1; - var vp = page.getViewport({ scale: 1 }); - var canvas = document.createElement("canvas"); - var scalesize = 1; - canvas.width = vp.width * scalesize * outputScale; - canvas.height = vp.height * scalesize * outputScale; + const vp = page.getViewport({ scale: 1 }); + const canvas = document.createElement("canvas"); + const scaleSize = 1; + canvas.width = vp.width * scaleSize * outputScale; + canvas.height = vp.height * scaleSize * outputScale; return page.render({ canvasContext: canvas.getContext("2d"), - viewport: page.getViewport({ scale: scalesize * outputScale }) + viewport: page.getViewport({ scale: scaleSize * outputScale }) }).promise.then(function () { return canvas; }) @@ -247,5 +257,10 @@ export function dispose(id) { if (towPagesOneView) { EventHandler.off(towPagesOneView, "click"); } + + const thumbnailsToggle = el.querySelector(".bb-view-bar"); + if(thumbnailsToggle) { + EventHandler.off(thumbnailsToggle, "click"); + } } } diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs b/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs index b2f88413..e553eea0 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs @@ -17,7 +17,7 @@ public class PdfReaderOptions /// /// 获得/设置 是否显示缩略图 默认 true 显示 /// - public bool ShowThumbnails { get; set; } = true; + public bool EnableThumbnails { get; set; } = true; /// /// 获得/设置 PDF 文档路径 From aab6e2f72582b83db82e47a21d9e7236cbba7cea Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 26 Nov 2025 14:46:55 +0800 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E7=BC=A9?= =?UTF-8?q?=E7=95=A5=E5=9B=BE=E5=93=8D=E5=BA=94=E9=A1=B5=E7=A0=81=E5=8F=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PdfReader.razor.js | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index b7e5e9aa..3ceaeef7 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -150,9 +150,26 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { const item = document.createElement("div"); item.classList.add("bb-view-thumbnail-item"); + if (pdfViewer.currentPageNumber === i + 1) { + item.classList.add("active"); + } + item.setAttribute("data-bb-page", i + 1) item.appendChild(img); thumbnailsContainer.appendChild(item); }); + + EventHandler.on(thumbnailsContainer, "click", ".bb-view-thumbnail-item", e => { + const active = thumbnailsContainer.querySelector('.active'); + if (active) { + active.classList.remove('active'); + } + + const item = e.delegateTarget; + item.classList.add("active"); + + const index = parseInt(item.getAttribute("data-bb-page")) || 1; + pdfViewer.currentPageNumber = index; + }) } if (options.triggerPagesLoaded === true) { @@ -167,6 +184,18 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { pageNumberEl.value = page; } + if (options.enableThumbnails) { + const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); + if (thumbnailsContainer) { + const active = thumbnailsContainer.querySelector('.active'); + active.classList.remove('active'); + + const item = thumbnailsContainer.querySelector(`[data-bb-page='${page}']`); + item.classList.add("active"); + item.scrollIntoView({ behavior: 'smooth', block: "nearest", inline: "start" }); + } + } + if (options.triggerPageChanged === true) { await invoke.invokeMethodAsync("pageChanged", page); } @@ -259,8 +288,13 @@ export function dispose(id) { } const thumbnailsToggle = el.querySelector(".bb-view-bar"); - if(thumbnailsToggle) { + if (thumbnailsToggle) { EventHandler.off(thumbnailsToggle, "click"); } + + const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); + if (thumbnailsContainer) { + EventHandler.off(thumbnailsContainer, "click"); + } } } From 809e03d89e0ae5080e82f1b4e8c5daf213fbf373 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 26 Nov 2025 14:48:10 +0800 Subject: [PATCH 4/8] =?UTF-8?q?doc:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PdfReader.razor.css | 67 ++++++++++--------- 1 file changed, 37 insertions(+), 30 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index e6c85590..08e291ef 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css @@ -14,17 +14,17 @@ color: #fff; } -.bb-view-toolbar.init > div { - visibility: hidden; -} + .bb-view-toolbar.init > div { + visibility: hidden; + } -.bb-view-toolbar ::deep .btn { - --bs-btn-color: #fff; -} + .bb-view-toolbar ::deep .btn { + --bs-btn-color: #fff; + } -.bb-view-toolbar ::deep .dropdown-toggle::after { - content: none; -} + .bb-view-toolbar ::deep .dropdown-toggle::after { + content: none; + } .bb-view-title { display: flex; @@ -39,9 +39,9 @@ cursor: pointer; } -.bb-view-icon.disabled { - color: #6c757d; -} + .bb-view-icon.disabled { + color: #6c757d; + } .bb-view-bar { margin-inline-end: 2rem; @@ -64,17 +64,17 @@ justify-content: center; } -.bb-view-body.fit-page .bb-view-fit-page { - display: none; -} + .bb-view-body.fit-page .bb-view-fit-page { + display: none; + } -.bb-view-body.fit-page .bb-view-fit-width { - display: block; -} + .bb-view-body.fit-page .bb-view-fit-width { + display: block; + } -.bb-view-body .bb-view-fit-width { - display: none; -} + .bb-view-body .bb-view-fit-width { + display: none; + } .bb-view-num, .bb-view-scale { width: 36px; @@ -121,22 +121,29 @@ transition: flex-basis .3s linear; } -.bb-view-thumbnails.show { - flex-basis: 300px; -} + .bb-view-thumbnails.show { + flex-basis: 300px; + } ::deep .bb-view-thumbnail-item { display: block; text-align: center; } -::deep .bb-view-thumbnail-item:not(:last-child) { - margin-block-end: 1rem; -} + ::deep .bb-view-thumbnail-item:not(:last-child) { + margin-block-end: 1rem; + } -::deep .bb-view-thumbnail-item img { - width: 126px; -} + ::deep .bb-view-thumbnail-item.active img { + border: 2px solid #0d6efd; + } + + ::deep .bb-view-thumbnail-item img { + width: 128px; + padding: 1px; + cursor: pointer; + border: 2px solid #28292a; + } .bb-view-content { position: relative; From 256c846c4ba3c8610d24fd1b9a33978e4c7911bc Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 26 Nov 2025 15:07:11 +0800 Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20=E4=BF=AE=E5=A4=8D=E7=BC=A9?= =?UTF-8?q?=E7=95=A5=E5=9B=BE=E6=8E=92=E5=BA=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PdfReader.razor.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index 3ceaeef7..4fc57ce7 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -143,19 +143,19 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { if (options.enableThumbnails) { const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); pdfViewer.getPagesOverview().map(async (p, i) => { - const page = await pdfViewer.pdfDocument.getPage(i + 1); - const canvas = await makeThumb(page); - const img = document.createElement("img"); - img.src = canvas.toDataURL(); - const item = document.createElement("div"); item.classList.add("bb-view-thumbnail-item"); if (pdfViewer.currentPageNumber === i + 1) { item.classList.add("active"); } - item.setAttribute("data-bb-page", i + 1) - item.appendChild(img); + item.setAttribute("data-bb-page", `${i + 1}`); thumbnailsContainer.appendChild(item); + + const page = await pdfViewer.pdfDocument.getPage(i + 1); + const canvas = await makeThumb(page); + const img = document.createElement("img"); + img.src = canvas.toDataURL(); + item.appendChild(img); }); EventHandler.on(thumbnailsContainer, "click", ".bb-view-thumbnail-item", e => { @@ -252,7 +252,7 @@ const updateScale = (pdfViewer, button, rate) => { pdfViewer.currentScaleValue = v / 100; } -const makeThumb = page => { +const makeThumb = async page => { const outputScale = window.devicePixelRatio || 1; const vp = page.getViewport({ scale: 1 }); const canvas = document.createElement("canvas"); @@ -260,12 +260,12 @@ const makeThumb = page => { canvas.width = vp.width * scaleSize * outputScale; canvas.height = vp.height * scaleSize * outputScale; - return page.render({ + await page.render({ canvasContext: canvas.getContext("2d"), viewport: page.getViewport({ scale: scaleSize * outputScale }) - }).promise.then(function () { - return canvas; - }) + }).promise; + + return canvas; } export function dispose(id) { From 5e629c67eb9886ccbe28bff6fa69c8d1a5c3ad8a Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 26 Nov 2025 15:17:38 +0800 Subject: [PATCH 6/8] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E5=93=8D?= =?UTF-8?q?=E5=BA=94=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BootstrapBlazor.PdfReader/PdfReader.razor | 2 +- .../BootstrapBlazor.PdfReader/PdfReader.razor.css | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index 97c29df2..b4410503 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -8,7 +8,7 @@
- @_docTitle + @_docTitle
/
diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index 08e291ef..9a930336 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css @@ -43,10 +43,6 @@ color: #6c757d; } -.bb-view-bar { - margin-inline-end: 2rem; -} - .bb-view-subject { white-space: nowrap; display: block; @@ -60,8 +56,10 @@ min-width: 0; width: 1%; display: flex; + flex-wrap: nowrap; align-items: center; justify-content: center; + overflow: hidden; } .bb-view-body.fit-page .bb-view-fit-page { From e480e2f0e2c08dc21bcdf15bd8b2e1fe740aa203 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 26 Nov 2025 15:18:01 +0800 Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=AF=94=E4=BE=8B?= =?UTF-8?q?=E7=A6=81=E7=94=A8=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PdfReader.razor.js | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index 4fc57ce7..e4a4d7bb 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -82,23 +82,9 @@ export function navigateToPage(id, pageNumber) { } export function scale(id, scale) { - const { el, pdfViewer } = Data.get(id); + const { pdfViewer } = Data.get(id); if (pdfViewer) { pdfViewer.currentScaleValue = scale / 100; - - const minus = el.querySelector(".bb-page-minus"); - const plus = el.querySelector(".bb-page-plus"); - - if (scale === "25") { - minus.classList.add("disabled"); - } - else if (scale === "500") { - plus.classList.add("disabled"); - } - else { - minus.classList.remove("disabled"); - plus.classList.remove("disabled"); - } } } @@ -206,7 +192,22 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { const scaleEl = el.querySelector(".bb-view-scale"); eventBus.on("scalechanging", evt => { - scaleEl.value = `${Math.round(evt.scale * 100, 0)}%`; + const scale = evt.scale * 100; + scaleEl.value = `${Math.round(scale, 0)}%`; + + const minus = el.querySelector(".bb-page-minus"); + const plus = el.querySelector(".bb-page-plus"); + + if (scale === 25) { + minus.classList.add("disabled"); + } + else if (scale === 500) { + plus.classList.add("disabled"); + } + else { + minus.classList.remove("disabled"); + plus.classList.remove("disabled"); + } }) EventHandler.on(minus, "click", e => updateScale(pdfViewer, e.target, -1)); From 90f4e3f7fa5a3d40def6e873f41384573c1ec901 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 26 Nov 2025 15:20:03 +0800 Subject: [PATCH 8/8] chore: bump version 10.0.1-beta05 --- .../BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj index a734f066..68ebbfba 100644 --- a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj +++ b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj @@ -1,7 +1,7 @@  - 10.0.1-beta04 + 10.0.1-beta05