diff --git a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj index c56c856c..c0f89e1e 100644 --- a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj +++ b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj @@ -1,7 +1,7 @@  - 10.0.13 + 10.0.14 diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index 35b21a76..58a81f25 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -3,6 +3,9 @@ @inherits BootstrapModuleComponentBase
+
+
+
@if (ShowToolbar) { diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index cd52db19..acc5d0a2 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -47,14 +47,12 @@ export async function setData(id, data) { return; } - const { options, objectUrl } = pdf; - if (objectUrl) { - URL.revokeObjectURL(objectUrl); - } + const objectUrl = createObjectURLFromByte(data); + pdf.objectUrl = objectUrl; - options.url = createObjectURLFromByte(data); + const { options } = pdf; + options.url = objectUrl; options.data = null; - pdf.objectUrl = options.url; await loadPdf(pdf); } @@ -125,8 +123,34 @@ export function resetThumbnails(id) { const loadPdf = async pdf => { const { el, invoke, options } = pdf; const loadingTask = pdfjsLib.getDocument(options); + + const progressEl = el.querySelector('.bb-view-progress'); + if (progressEl) { + progressEl.classList.add('show'); + } + const bar = el.querySelector('.bb-view-progress-bar'); + if (bar) { + bar.style.setProperty('--bb-view-progress-val', '0'); + } + + let progressHandler = null; loadingTask.onProgress = function (progressData) { + const { loaded, total } = progressData; + if (bar) { + const val = loaded / total * 100; + if (val > 100) { + val = 100; + } + bar.style.setProperty('--bb-view-progress-val', `${val}%`); + + if (progressHandler === null) { + progressHandler = setTimeout(() => { + clearTimeout(progressHandler); + progressEl.classList.remove('show'); + }, 300); + } + } }; loadingTask.onPassword = function (updatePassword, reason) { @@ -161,7 +185,11 @@ const loadPdf = async pdf => { } const disposePdf = pdf => { - const { el, observer, loadingTask } = pdf; + const { el, observer, loadingTask, objectUrl } = pdf; + if (objectUrl) { + URL.revokeObjectURL(objectUrl); + } + if (observer) { observer.disconnect(); } diff --git a/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css b/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css index 6f6827d0..690dc668 100644 --- a/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css +++ b/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css @@ -8,6 +8,25 @@ height: calc(var(--bb-pdf-view-height) + var(--bb-pdf-toolbar-height)); } +.bb-view-progress { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 0.25rem; +} + + .bb-view-progress:not(.show) { + display: none; + } + +.bb-view-progress-bar { + height: 100%; + background-color: var(--bs-primary); + width: var(--bb-view-progress-val, 0); + transition: width .3s linear; +} + .bb-view-toolbar { height: var(--bb-pdf-toolbar-height); background-color: var(--bb-toolbar-background-color);