feat: 增加实现代码逻辑

Author: ArgoZhang

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;
+
+/// <summary>
+/// PdfViewer component for displaying PDF files in a Blazor application.
+/// </summary>
+public partial class PdfViewer
+{
+    /// <summary>
+    /// Gets or sets the url for the PDF file to be displayed.
+    /// </summary>
+    [Parameter]
+    public string? Url { get; set; }
+
+    /// <summary>
+    /// Gets or sets the viewer height. Default is null.
+    /// </summary>
+    [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;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    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);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id);
+}

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) {
+}

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%;
+}