Skip to content

Commit 5ae8d42

Browse files
authored
feat(OfficeView): add OfficeView component (#478)
* wip: 临时提交 # Conflicts: # BootstrapBlazor.Extensions.sln * doc: 增加文档注释 * feat: 重命名项目名称 * chore: 更新资源文件路径
1 parent c0b16b4 commit 5ae8d42

7 files changed

Lines changed: 197 additions & 0 deletions

File tree

BootstrapBlazor.Extensions.sln

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,10 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.PdfViewer",
192192
EndProject
193193
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Vditor", "src\components\BootstrapBlazor.Vditor\BootstrapBlazor.Vditor.csproj", "{D417E1B9-D146-4983-81D0-79F3193B322B}"
194194
EndProject
195+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.TouchSocket", "src\extensions\BootstrapBlazor.TouchSocket\BootstrapBlazor.TouchSocket.csproj", "{FD23CEA1-78EB-85D7-8EDF-047657355B52}"
196+
EndProject
197+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.OfficeViewer", "src\components\BootstrapBlazor.OfficeViewer\BootstrapBlazor.OfficeViewer.csproj", "{2436940C-5920-D801-8A81-721F4C20A355}"
198+
EndProject
195199
Global
196200
GlobalSection(SolutionConfigurationPlatforms) = preSolution
197201
Debug|Any CPU = Debug|Any CPU
@@ -522,6 +526,14 @@ Global
522526
{D417E1B9-D146-4983-81D0-79F3193B322B}.Debug|Any CPU.Build.0 = Debug|Any CPU
523527
{D417E1B9-D146-4983-81D0-79F3193B322B}.Release|Any CPU.ActiveCfg = Release|Any CPU
524528
{D417E1B9-D146-4983-81D0-79F3193B322B}.Release|Any CPU.Build.0 = Release|Any CPU
529+
{FD23CEA1-78EB-85D7-8EDF-047657355B52}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
530+
{FD23CEA1-78EB-85D7-8EDF-047657355B52}.Debug|Any CPU.Build.0 = Debug|Any CPU
531+
{FD23CEA1-78EB-85D7-8EDF-047657355B52}.Release|Any CPU.ActiveCfg = Release|Any CPU
532+
{FD23CEA1-78EB-85D7-8EDF-047657355B52}.Release|Any CPU.Build.0 = Release|Any CPU
533+
{2436940C-5920-D801-8A81-721F4C20A355}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
534+
{2436940C-5920-D801-8A81-721F4C20A355}.Debug|Any CPU.Build.0 = Debug|Any CPU
535+
{2436940C-5920-D801-8A81-721F4C20A355}.Release|Any CPU.ActiveCfg = Release|Any CPU
536+
{2436940C-5920-D801-8A81-721F4C20A355}.Release|Any CPU.Build.0 = Release|Any CPU
525537
EndGlobalSection
526538
GlobalSection(SolutionProperties) = preSolution
527539
HideSolutionNode = FALSE
@@ -612,6 +624,8 @@ Global
612624
{08458CA3-BF81-48E8-870D-9389DC037808} = {FF1089BE-C704-4374-B629-C57C08E1798F}
613625
{4757B038-70E4-40B0-9B73-700EE5632B07} = {FF1089BE-C704-4374-B629-C57C08E1798F}
614626
{D417E1B9-D146-4983-81D0-79F3193B322B} = {FF1089BE-C704-4374-B629-C57C08E1798F}
627+
{FD23CEA1-78EB-85D7-8EDF-047657355B52} = {7B29E81D-92DE-46C8-8EDC-1B48C8F12BC2}
628+
{2436940C-5920-D801-8A81-721F4C20A355} = {FF1089BE-C704-4374-B629-C57C08E1798F}
615629
EndGlobalSection
616630
GlobalSection(ExtensibilityGlobals) = postSolution
617631
SolutionGuid = {D5EB1960-6F30-4CE1-B375-EAE1F787D6FF}
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</Version>
5+
</PropertyGroup>
6+
7+
<PropertyGroup>
8+
<PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Office Viewer</PackageTags>
9+
<Description>Bootstrap UI components extensions of Microsoft Office Documentation 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>
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.OfficeViewer/OfficeViewer.razor.js", JSObjectReference = true, AutoInvokeDispose = false)]
4+
5+
<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString"></div>
Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
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+
/// Represents a viewer component for displaying Office documents in a web application.
11+
/// </summary>
12+
/// <remarks>The <see cref="OfficeViewer"/> component allows users to display Office files such as Word,
13+
/// Excel, or PowerPoint documents. It provides configurable options for the document URL, viewer height, and a callback
14+
/// for when the document is loaded.</remarks>
15+
public partial class OfficeViewer
16+
{
17+
/// <summary>
18+
/// Gets or sets the url for the Office file to be displayed.
19+
/// </summary>
20+
[Parameter]
21+
public string? Url { get; set; }
22+
23+
/// <summary>
24+
/// Gets or sets the viewer height. Default is null.
25+
/// </summary>
26+
[Parameter]
27+
public string? Height { get; set; }
28+
29+
/// <summary>
30+
/// Gets or sets the document loaded event callback.
31+
/// </summary>
32+
[Parameter]
33+
public Func<Task>? OnLoaded { get; set; }
34+
35+
[Inject, NotNull]
36+
private NavigationManager? NavigationManager { get; set; }
37+
38+
private string? ClassString => CssBuilder.Default("bb-office-viewer-container")
39+
.AddClassFromAttributes(AdditionalAttributes)
40+
.Build();
41+
42+
private string? StyleString => CssBuilder.Default()
43+
.AddClass($"--bb-office-viewer-height: {Height};", !string.IsNullOrEmpty(Height))
44+
.Build();
45+
46+
private string? _url;
47+
48+
/// <summary>
49+
/// <inheritdoc/>
50+
/// </summary>
51+
/// <param name="firstRender"></param>
52+
/// <returns></returns>
53+
protected override async Task OnAfterRenderAsync(bool firstRender)
54+
{
55+
await base.OnAfterRenderAsync(firstRender);
56+
57+
if (firstRender)
58+
{
59+
_url = Url;
60+
return;
61+
}
62+
63+
var rerender = false;
64+
if (_url != Url)
65+
{
66+
_url = Url;
67+
rerender = true;
68+
}
69+
70+
if (rerender)
71+
{
72+
await InvokeVoidAsync("load", Id, GetAbsoluteUri(_url));
73+
}
74+
}
75+
76+
/// <summary>
77+
/// <inheritdoc/>
78+
/// </summary>
79+
/// <returns></returns>
80+
protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
81+
{
82+
LoadedCallaback = nameof(TriggerOnLoaded),
83+
Url = GetAbsoluteUri(Url)
84+
});
85+
86+
private string GetAbsoluteUri(string? url)
87+
{
88+
url ??= string.Empty;
89+
if (string.IsNullOrEmpty(url))
90+
{
91+
return url;
92+
}
93+
var uri = NavigationManager.ToAbsoluteUri(url);
94+
return uri.AbsoluteUri;
95+
}
96+
97+
/// <summary>
98+
/// Trigger OnLoaded callback when the PDF document is loaded.
99+
/// </summary>
100+
/// <returns></returns>
101+
[JSInvokable]
102+
public async Task TriggerOnLoaded()
103+
{
104+
if (OnLoaded != null)
105+
{
106+
await OnLoaded();
107+
}
108+
}
109+
}
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { addLink } from "../BootstrapBlazor/modules/utility.js"
2+
import Data from "../BootstrapBlazor/modules/data.js"
3+
4+
export async function init(id, invoke, options) {
5+
await addLink("./_content/BootstrapBlazor.OfficeViewer/office-viewer.css");
6+
7+
const el = document.getElementById(id);
8+
const officeViewer = { el, invoke, options };
9+
Data.set(id, officeViewer);
10+
11+
await load(id, options.url);
12+
}
13+
14+
export async function load(id, url) {
15+
const officeViewer = Data.get(id);
16+
const { el, invoke, options } = officeViewer;
17+
18+
el.innerHTML = '';
19+
20+
if (url) {
21+
const { frame } = officeViewer;
22+
const viewer = frame || createFrame(el);
23+
if (options.loadedCallaback) {
24+
viewer.onload = () => {
25+
invoke.invokeMethodAsync(options.loadedCallaback);
26+
};
27+
}
28+
viewer.src = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`;
29+
}
30+
}
31+
32+
const createFrame = el => {
33+
const frame = document.createElement('iframe');
34+
frame.classList.add('bb-office-viewer');
35+
el.appendChild(frame);
36+
return frame;
37+
}
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
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.bb-office-viewer-container {
2+
width: 100%;
3+
height: var(--bb-office-viewer-height, 500px);
4+
}
5+
6+
.bb-office-viewer {
7+
width: 100%;
8+
height: 100%;
9+
}

0 commit comments

Comments
 (0)