Skip to content

Commit 61b5230

Browse files
ArgoZhangArgoZhang
authored
feat(PdfViewer): add PdfViewer component (#450)
* refactor: 增加 PdfViewer 组件 * feat: 增加实现代码逻辑 * refactor: 更新脚本逻辑 * chore: bump version 9.0.0-beta01
1 parent 27ac0d9 commit 61b5230

7 files changed

Lines changed: 140 additions & 0 deletions

File tree

‎BootstrapBlazor.Extensions.sln‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Html2Pdf.Pl
188188
EndProject
189189
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.JitsiMeet", "src\components\BootstrapBlazor.JitsiMeet\BootstrapBlazor.JitsiMeet.csproj", "{08458CA3-BF81-48E8-870D-9389DC037808}"
190190
EndProject
191+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.PdfViewer", "src\components\BootstrapBlazor.PdfViewer\BootstrapBlazor.PdfViewer.csproj", "{4757B038-70E4-40B0-9B73-700EE5632B07}"
192+
EndProject
191193
Global
192194
GlobalSection(SolutionConfigurationPlatforms) = preSolution
193195
Debug|Any CPU = Debug|Any CPU
@@ -510,6 +512,10 @@ Global
510512
{08458CA3-BF81-48E8-870D-9389DC037808}.Debug|Any CPU.Build.0 = Debug|Any CPU
511513
{08458CA3-BF81-48E8-870D-9389DC037808}.Release|Any CPU.ActiveCfg = Release|Any CPU
512514
{08458CA3-BF81-48E8-870D-9389DC037808}.Release|Any CPU.Build.0 = Release|Any CPU
515+
{4757B038-70E4-40B0-9B73-700EE5632B07}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
516+
{4757B038-70E4-40B0-9B73-700EE5632B07}.Debug|Any CPU.Build.0 = Debug|Any CPU
517+
{4757B038-70E4-40B0-9B73-700EE5632B07}.Release|Any CPU.ActiveCfg = Release|Any CPU
518+
{4757B038-70E4-40B0-9B73-700EE5632B07}.Release|Any CPU.Build.0 = Release|Any CPU
513519
EndGlobalSection
514520
GlobalSection(SolutionProperties) = preSolution
515521
HideSolutionNode = FALSE
@@ -598,6 +604,7 @@ Global
598604
{CED55D86-57CF-CB0D-E880-370C44C0DB1F} = {FF1089BE-C704-4374-B629-C57C08E1798F}
599605
{F3043A78-1942-4524-BDC4-7E88F56DF3D5} = {FF1089BE-C704-4374-B629-C57C08E1798F}
600606
{08458CA3-BF81-48E8-870D-9389DC037808} = {FF1089BE-C704-4374-B629-C57C08E1798F}
607+
{4757B038-70E4-40B0-9B73-700EE5632B07} = {FF1089BE-C704-4374-B629-C57C08E1798F}
601608
EndGlobalSection
602609
GlobalSection(ExtensibilityGlobals) = postSolution
603610
SolutionGuid = {D5EB1960-6F30-4CE1-B375-EAE1F787D6FF}

‎src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Razor">
2+
3+
<PropertyGroup>
4+
<Version>9.0.0-beta01</Version>
5+
</PropertyGroup>
6+
7+
<PropertyGroup>
8+
<PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Pdf Viewer</PackageTags>
9+
<Description>Bootstrap UI components extensions of Pdf Viewer</Description>
10+
</PropertyGroup>
11+
12+
<ItemGroup>
13+
<PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
14+
</ItemGroup>
15+
16+
<ItemGroup>
17+
<Using Include="BootstrapBlazor.Components" />
18+
<Using Include="Microsoft.JSInterop" />
19+
</ItemGroup>
20+
21+
</Project>

‎src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@namespace BootstrapBlazor.Components
2+
@inherits BootstrapModuleComponentBase
3+
@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.PdfViewer/PdfViewer.razor.js", JSObjectReference = true, AutoInvokeDispose = false)]
4+
5+
<div @attributes="AdditionalAttributes" id="@Id" data-bb-url="@Url" class="@ClassString" style="@StyleString"></div>

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
2+
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
3+
// Website: https://www.blazor.zone or https://argozhang.github.io/
4+
5+
using Microsoft.AspNetCore.Components;
6+
7+
namespace BootstrapBlazor.Components;
8+
9+
/// <summary>
10+
/// PdfViewer component for displaying PDF files in a Blazor application.
11+
/// </summary>
12+
public partial class PdfViewer
13+
{
14+
/// <summary>
15+
/// Gets or sets the url for the PDF file to be displayed.
16+
/// </summary>
17+
[Parameter]
18+
public string? Url { get; set; }
19+
20+
/// <summary>
21+
/// Gets or sets the viewer height. Default is null.
22+
/// </summary>
23+
[Parameter]
24+
public string? Height { get; set; }
25+
26+
private string? ClassString => CssBuilder.Default("bb-pdf-viewer-container")
27+
.AddClassFromAttributes(AdditionalAttributes)
28+
.Build();
29+
30+
private string? StyleString => CssBuilder.Default()
31+
.AddClass($"--bb-pdf-viewer-height: {Height};", !string.IsNullOrEmpty(Height))
32+
.Build();
33+
34+
private string? _url;
35+
36+
/// <summary>
37+
/// <inheritdoc/>
38+
/// </summary>
39+
/// <param name="firstRender"></param>
40+
/// <returns></returns>
41+
protected override async Task OnAfterRenderAsync(bool firstRender)
42+
{
43+
await base.OnAfterRenderAsync(firstRender);
44+
45+
if (firstRender)
46+
{
47+
_url = Url;
48+
}
49+
50+
if (_url != Url)
51+
{
52+
_url = Url;
53+
await InvokeVoidAsync("loadPdf", Id, _url);
54+
}
55+
}
56+
57+
/// <summary>
58+
/// <inheritdoc/>
59+
/// </summary>
60+
/// <returns></returns>
61+
protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id);
62+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { addLink } from "../BootstrapBlazor/modules/utility.js"
2+
import Data from "../BootstrapBlazor/modules/data.js"
3+
4+
export async function init(id) {
5+
await addLink("./_content/BootstrapBlazor.PdfViewer/pdf-viewer.css");
6+
7+
const el = document.getElementById(id);
8+
const pdfViewer = { el };
9+
Data.set(id, pdfViewer);
10+
11+
const url = el.getAttribute('data-bb-url');
12+
loadPdf(id, url);
13+
}
14+
15+
export function loadPdf(id, url) {
16+
const pdfViewer = Data.get(id);
17+
const { el } = pdfViewer;
18+
if (url) {
19+
const { frame } = pdfViewer;
20+
const viewer = frame || createFrame(el);
21+
viewer.src = url;
22+
}
23+
else {
24+
delete pdfViewer.frame;
25+
el.innerHTML = '';
26+
}
27+
}
28+
29+
const createFrame = el => {
30+
const frame = document.createElement('iframe');
31+
frame.classList.add('bb-pdf-viewer');
32+
el.appendChild(frame);
33+
return frame;
34+
}

‎src/components/BootstrapBlazor.PdfViewer/_Imports.razor‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@using BootstrapBlazor.Components;
2+
@using Microsoft.AspNetCore.Components.Web

‎src/components/BootstrapBlazor.PdfViewer/wwwroot/pdf-viewer.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.bb-pdf-viewer-container {
2+
width: 100%;
3+
height: var(--bb-pdf-viewer-height, 500px);
4+
}
5+
6+
.bb-pdf-viewer {
7+
width: 100%;
8+
height: 100%;
9+
}

0 commit comments

Comments
 (0)