From 79c8cf472834027cc518a7abb497c508d7c46599 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Jun 2025 14:26:55 +0800 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20PdfViewer?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- BootstrapBlazor.Extensions.sln | 7 +++++++ .../BootstrapBlazor.PdfViewer.csproj | 21 +++++++++++++++++++ .../BootstrapBlazor.PdfViewer/PdfViewer.razor | 5 +++++ .../BootstrapBlazor.PdfViewer/_Imports.razor | 2 ++ 4 files changed, 35 insertions(+) create mode 100644 src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj create mode 100644 src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor create mode 100644 src/components/BootstrapBlazor.PdfViewer/_Imports.razor diff --git a/BootstrapBlazor.Extensions.sln b/BootstrapBlazor.Extensions.sln index ee9136e0..5985e3cc 100644 --- a/BootstrapBlazor.Extensions.sln +++ b/BootstrapBlazor.Extensions.sln @@ -188,6 +188,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Html2Pdf.Pl EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.JitsiMeet", "src\components\BootstrapBlazor.JitsiMeet\BootstrapBlazor.JitsiMeet.csproj", "{08458CA3-BF81-48E8-870D-9389DC037808}" EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.PdfViewer", "src\components\BootstrapBlazor.PdfViewer\BootstrapBlazor.PdfViewer.csproj", "{4757B038-70E4-40B0-9B73-700EE5632B07}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU @@ -510,6 +512,10 @@ Global {08458CA3-BF81-48E8-870D-9389DC037808}.Debug|Any CPU.Build.0 = Debug|Any CPU {08458CA3-BF81-48E8-870D-9389DC037808}.Release|Any CPU.ActiveCfg = Release|Any CPU {08458CA3-BF81-48E8-870D-9389DC037808}.Release|Any CPU.Build.0 = Release|Any CPU + {4757B038-70E4-40B0-9B73-700EE5632B07}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {4757B038-70E4-40B0-9B73-700EE5632B07}.Debug|Any CPU.Build.0 = Debug|Any CPU + {4757B038-70E4-40B0-9B73-700EE5632B07}.Release|Any CPU.ActiveCfg = Release|Any CPU + {4757B038-70E4-40B0-9B73-700EE5632B07}.Release|Any CPU.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE @@ -598,6 +604,7 @@ Global {CED55D86-57CF-CB0D-E880-370C44C0DB1F} = {FF1089BE-C704-4374-B629-C57C08E1798F} {F3043A78-1942-4524-BDC4-7E88F56DF3D5} = {FF1089BE-C704-4374-B629-C57C08E1798F} {08458CA3-BF81-48E8-870D-9389DC037808} = {FF1089BE-C704-4374-B629-C57C08E1798F} + {4757B038-70E4-40B0-9B73-700EE5632B07} = {FF1089BE-C704-4374-B629-C57C08E1798F} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {D5EB1960-6F30-4CE1-B375-EAE1F787D6FF} diff --git a/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj b/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj new file mode 100644 index 00000000..7e568d3d --- /dev/null +++ b/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj @@ -0,0 +1,21 @@ + + + + 9.0.0 + + + + Bootstrap Blazor WebAssembly wasm UI Components Pdf Viewer + Bootstrap UI components extensions of Pdf Viewer + + + + + + + + + + + + diff --git a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor new file mode 100644 index 00000000..513a91fa --- /dev/null +++ b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor @@ -0,0 +1,5 @@ +@namespace BootstrapBlazor.Components +@inherits BootstrapModuleComponentBase +@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.PdfViewer/PdfViewer.razor.js", JSObjectReference = true)] + +
diff --git a/src/components/BootstrapBlazor.PdfViewer/_Imports.razor b/src/components/BootstrapBlazor.PdfViewer/_Imports.razor new file mode 100644 index 00000000..d46585f8 --- /dev/null +++ b/src/components/BootstrapBlazor.PdfViewer/_Imports.razor @@ -0,0 +1,2 @@ +@using BootstrapBlazor.Components; +@using Microsoft.AspNetCore.Components.Web From 80b5e7794bb74cdc6775a62144bfc2c40b84f08d Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Jun 2025 14:27:07 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E4=BB=A3=E7=A0=81=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PdfViewer.razor.cs | 62 +++++++++++++++++++ .../PdfViewer.razor.js | 40 ++++++++++++ .../wwwroot/pdf-viewer.css | 9 +++ 3 files changed, 111 insertions(+) create mode 100644 src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.cs create mode 100644 src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js create mode 100644 src/components/BootstrapBlazor.PdfViewer/wwwroot/pdf-viewer.css diff --git a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.cs b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.cs new file mode 100644 index 00000000..d80548eb --- /dev/null +++ b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.cs @@ -0,0 +1,62 @@ +// Copyright (c) Argo Zhang (argo@163.com). 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 Microsoft.AspNetCore.Components; + +namespace BootstrapBlazor.Components; + +/// +/// PdfViewer component for displaying PDF files in a Blazor application. +/// +public partial class PdfViewer +{ + /// + /// Gets or sets the url for the PDF file to be displayed. + /// + [Parameter] + public string? Url { get; set; } + + /// + /// Gets or sets the viewer height. Default is null. + /// + [Parameter] + public string? Height { get; set; } + + private string? ClassString => CssBuilder.Default("bb-pdf-viewer-container") + .AddClassFromAttributes(AdditionalAttributes) + .Build(); + + private string? StyleString => CssBuilder.Default() + .AddClass($"--bb-pdf-viewer-height: {Height};", !string.IsNullOrEmpty(Height)) + .Build(); + + private string? _url; + + /// + /// + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + _url = Url; + } + + if (_url != Url) + { + _url = Url; + await InvokeVoidAsync("loadPdf", Id, _url); + } + } + + /// + /// + /// + /// + protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id); +} diff --git a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js new file mode 100644 index 00000000..44094ccc --- /dev/null +++ b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js @@ -0,0 +1,40 @@ +import { addLink, addScript } from "../BootstrapBlazor/modules/utility.js" +import Data from "../BootstrapBlazor/modules/data.js" + +export async function init(id) { + await addLink("./_content/BootstrapBlazor.PdfViewer/pdf-viewer.css"); + + const el = document.getElementById(id); + const url = el.getAttribute('data-bb-url'); + const pdfViewer = { el }; + + createFrame(pdfViewer, url); + Data.set(id, pdfViewer); + + console.log(pdfViewer); +} + +export function loadPdf(id, url) { + const pdfViewer = Data.get(id); + const { frame } = pdfViewer; + if (frame) { + frame.src = url; + } + else { + createFrame(pdfViewer, url); + } +} + +const createFrame = (pdfViewer, url) => { + const { el } = pdfViewer; + if (url) { + const frame = document.createElement('iframe'); + frame.src = url; + frame.classList.add('bb-pdf-viewer'); + el.appendChild(frame); + pdfViewer.frame = frame; + } +} + +export function dispose(id) { +} diff --git a/src/components/BootstrapBlazor.PdfViewer/wwwroot/pdf-viewer.css b/src/components/BootstrapBlazor.PdfViewer/wwwroot/pdf-viewer.css new file mode 100644 index 00000000..dd1c8e9f --- /dev/null +++ b/src/components/BootstrapBlazor.PdfViewer/wwwroot/pdf-viewer.css @@ -0,0 +1,9 @@ +.bb-pdf-viewer-container { + width: 100%; + height: var(--bb-pdf-viewer-height, 500px); +} + +.bb-pdf-viewer { + width: 100%; + height: 100%; +} From ef3d0335800f4edee081fccdab84a149f82d3970 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Jun 2025 15:52:12 +0800 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E8=84=9A?= =?UTF-8?q?=E6=9C=AC=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BootstrapBlazor.PdfViewer/PdfViewer.razor | 2 +- .../PdfViewer.razor.js | 36 ++++++++----------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor index 513a91fa..050c4968 100644 --- a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor +++ b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor @@ -1,5 +1,5 @@ @namespace BootstrapBlazor.Components @inherits BootstrapModuleComponentBase -@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.PdfViewer/PdfViewer.razor.js", JSObjectReference = true)] +@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.PdfViewer/PdfViewer.razor.js", JSObjectReference = true, AutoInvokeDispose = false)]
diff --git a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js index 44094ccc..d043fd1c 100644 --- a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js +++ b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js @@ -1,40 +1,34 @@ -import { addLink, addScript } from "../BootstrapBlazor/modules/utility.js" +import { addLink } from "../BootstrapBlazor/modules/utility.js" import Data from "../BootstrapBlazor/modules/data.js" export async function init(id) { await addLink("./_content/BootstrapBlazor.PdfViewer/pdf-viewer.css"); const el = document.getElementById(id); - const url = el.getAttribute('data-bb-url'); const pdfViewer = { el }; - - createFrame(pdfViewer, url); Data.set(id, pdfViewer); - console.log(pdfViewer); + const url = el.getAttribute('data-bb-url'); + loadPdf(id, url); } export function loadPdf(id, url) { const pdfViewer = Data.get(id); - const { frame } = pdfViewer; - if (frame) { - frame.src = url; - } - else { - createFrame(pdfViewer, url); - } -} - -const createFrame = (pdfViewer, url) => { const { el } = pdfViewer; if (url) { - const frame = document.createElement('iframe'); - frame.src = url; - frame.classList.add('bb-pdf-viewer'); - el.appendChild(frame); - pdfViewer.frame = frame; + const { frame } = pdfViewer; + const viewer = frame || createFrame(el); + viewer.src = url; + } + else { + delete pdfViewer.frame; + el.innerHTML = ''; } } -export function dispose(id) { +const createFrame = el => { + const frame = document.createElement('iframe'); + frame.classList.add('bb-pdf-viewer'); + el.appendChild(frame); + return frame; } From 5990c94e39b461888bfa608a1d1ee8525651ba30 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Jun 2025 19:00:56 +0800 Subject: [PATCH 4/4] chore: bump version 9.0.0-beta01 --- .../BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj b/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj index 7e568d3d..6c69df1e 100644 --- a/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj +++ b/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj @@ -1,7 +1,7 @@ - 9.0.0 + 9.0.0-beta01