Skip to content

feat(JitViewer): add JitViewer component #8024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 8 commits into from
May 20, 2026
Merged

feat(JitViewer): add JitViewer component #8024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
08a3fb3
chore: 调整顺序
ArgoZhang May 20, 2026
9089218
chore: 增加 JitViewers 映射关系
ArgoZhang May 20, 2026
fe5fddd
chore: 增加 JitViewer 文件预览器菜单
ArgoZhang May 20, 2026
ed90dfa
doc: 增加 JitViewer 示例文件
ArgoZhang May 20, 2026
f1bbcd3
doc: 更新示例
ArgoZhang May 20, 2026
68cb165
doc: 增加 JitViewer 依赖
ArgoZhang May 20, 2026
7467886
doc: 更新多语言资源文件
ArgoZhang May 20, 2026
df37066
doc: 更新示例文档
ArgoZhang May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
<PackageReference Include="BootstrapBlazor.ImageCropper" Version="10.0.0" />
<PackageReference Include="BootstrapBlazor.IP2Region" Version="10.0.2" />
<PackageReference Include="BootstrapBlazor.JitsiMeet" Version="10.0.0" />
<PackageReference Include="BootstrapBlazor.JitViewer" Version="10.0.0" />
<PackageReference Include="BootstrapBlazor.JuHeIpLocatorProvider" Version="10.1.0" />
<PackageReference Include="BootstrapBlazor.Live2DDisplay" Version="10.0.0" />
<PackageReference Include="BootstrapBlazor.Markdown" Version="10.0.0" />
Expand Down
21 changes: 21 additions & 0 deletions src/BootstrapBlazor.Server/Components/Samples/JitViewers.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@page "/jit-viewer"

<h3>@Localizer["JitViewerTitle"]</h3>
<h4>@Localizer["JitViewerSubTitle"]</h4>

<PackageTips Name="BootstrapBlazor.JitViewer" />

<DemoBlock Title="@Localizer["JitViewerNormalTitle"]" Introduction="@Localizer["JitViewerDescription"]"
Name="Normal">
<section ignore>
<div class="row g-3 form-inline">
<div class="col-12 col-sm-6">
<Select @bind-Value="@_doc" Items="_docs"></Select>
</div>
</div>
</section>
<JitViewer File="@_doc"></JitViewer>
</DemoBlock>

<AttributeTable Type="typeof(JitViewer)"></AttributeTable>
Comment on lines +17 to +20

36 changes: 36 additions & 0 deletions src/BootstrapBlazor.Server/Components/Samples/JitViewers.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the Apache 2.0 License
// See the LICENSE file in the project root for more information.
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone

namespace BootstrapBlazor.Server.Components.Samples;

/// <summary>
/// JitViewer 组件示例
/// </summary>
public partial class JitViewers : ComponentBase
{
[Inject, NotNull]
private IStringLocalizer<JitViewers>? Localizer { get; set; }

private readonly List<SelectedItem> _docs =
[
new SelectedItem("./samples/sample.docx", "sample.docx"),
new SelectedItem("./samples/sample.xlsx", "sample.xlsx"),
new SelectedItem("./samples/sample.pptx", "sample.pptx"),
new SelectedItem("./samples/sample.pdf", "sample.pdf"),
new SelectedItem("./samples/ebook.pdf", "ebook.pdf"),
new SelectedItem("./samples/sample.txt", "sample.txt"),
new SelectedItem("./samples/sample.csv", "sample.csv"),
new SelectedItem("./samples/sample.md", "sample.md"),
new SelectedItem("./samples/sample.css", "sample.css"),
new SelectedItem("./samples/sample.js", "sample.js"),
new SelectedItem("./samples/sample.cs", "sample.cs"),
new SelectedItem("./samples/sample.png", "sample.png"),
new SelectedItem("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4", "sample.mp4"),
new SelectedItem("./samples/sample.dxf", "sample.dxf"),
new SelectedItem("./samples/sample.ofd", "sample.ofd")
];

private string _doc = "./samples/sample.docx";
}
5 changes: 5 additions & 0 deletions src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -725,6 +725,11 @@ void AddData(DemoMenuItem item)
Url = "file-viewer"
},
new()
{
Text = Localizer["JitViewer"],
Url = "jit-viewer"
},
new()
{
Text = Localizer["HikVision"],
Url = "hik-vision"
Expand Down
7 changes: 7 additions & 0 deletions src/BootstrapBlazor.Server/Locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@
"IntersectionObserver": "IntersectionObserver",
"Introduction": "Introduction",
"Ip": "IpAddress",
"JitViewer": "JitViewer",
"JSExtension": "JSRuntime Extensions",
"Labels": "Labels",
"Layout": "Layout",
Expand Down Expand Up @@ -2811,6 +2812,12 @@
"IsDisabledIntro": "Make the component disabled by setting <code>IsDisabled</code>",
"IsDisabledTitle": "IsDisabled"
},
"BootstrapBlazor.Server.Components.Samples.JitViewers": {
"JitViewerDescription": "Supports online preview of Office documents, PDF, OFD, images, text, code, videos, and other file formats.",
"JitViewerNormalTitle": "Basic usage",
"JitViewerSubTitle": "A universal file preview component for viewing multiple file types directly on the page.",
"JitViewerTitle": "JitViewer File Previewer"
},
"BootstrapBlazor.Server.Components.Samples.JSRuntimeExtensions": {
"EvalIntro": "Dynamically run Java Script code within the current scope using the Eval function.",
"EvalTitle": "JS Eval",
Expand Down
7 changes: 7 additions & 0 deletions src/BootstrapBlazor.Server/Locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@
"IntersectionObserver": "交叉观察者 IntersectionObserver",
"Introduction": "简介",
"Ip": "IP 地址 IpAddress",
"JitViewer": "文件预览器 JitViewer",
"JSExtension": "JSRuntime 扩展",
"Labels": "表单标签",
"Layout": "布局组件 Layout",
Expand Down Expand Up @@ -2811,6 +2812,12 @@
"IsDisabledIntro": "通过设置 <code>IsDisabled</code> 使组件处于不可用状态",
"IsDisabledTitle": "禁用"
},
"BootstrapBlazor.Server.Components.Samples.JitViewers": {
"JitViewerDescription": "支持在线预览 Office 文档、PDF、OFD、图片、文本、代码、视频等多种文件格式。",
"JitViewerNormalTitle": "基础用法",
"JitViewerSubTitle": "通用文件预览组件，可用于在页面中直接浏览多种类型文件。",
"JitViewerTitle": "JitViewer 文件预览器"
},
"BootstrapBlazor.Server.Components.Samples.JSRuntimeExtensions": {
"EvalIntro": "通过 <code>Eval</code> 函数，在当前作用域内动态运行 <code>JavaScript</code> 代码。",
"EvalTitle": "Eval",
Expand Down
3 changes: 2 additions & 1 deletion src/BootstrapBlazor.Server/docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"dispatch": "Dispatches",
"display": "Displays",
"divider": "Dividers",
"dom2image": "Dom2Images",
"dock-view/col": "DockViews\\DockViewCol",
"dock-view/complex": "DockViews\\DockViewComplex",
"dock-view/nest": "DockViews\\DockViewNest",
Expand Down Expand Up @@ -90,7 +91,6 @@
"html-renderer": "HtmlRenderers",
"html2image": "Html2Images",
"html2pdf": "Html2Pdfs",
"dom2image": "Dom2Images",
"label": "Labels",
"layout": "Layouts",
"light": "Lights",
Expand All @@ -108,6 +108,7 @@
"input-group": "InputGroups",
"ip": "Ips",
"intersection-observer": "IntersectionObservers",
"jit-viewer": "JitViewers",
"mask": "Masks",
"markdown": "Markdowns",
"marquee": "Marquees",
Expand Down
29 changes: 29 additions & 0 deletions src/BootstrapBlazor.Server/wwwroot/samples/sample.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
namespace BootstrapBlazor.Server.Components.Samples;

/// <summary>
///
/// </summary>
public partial class JitViewers : ComponentBase
{
[Inject, NotNull]
private IStringLocalizer<JitViewers>? Localizer { get; set; }

private readonly List<SelectedItem> _docs =
[
new SelectedItem("./samples/sample.docx", "sample.docx"),
new SelectedItem("./samples/sample.xlsx", "sample.xlsx"),
new SelectedItem("./samples/sample.pptx", "sample.pptx"),
new SelectedItem("./samples/sample.pdf", "sample.pdf"),
new SelectedItem("./samples/ebook.pdf", "ebook.pdf"),
new SelectedItem("./samples/sample.txt", "sample.txt"),
new SelectedItem("./samples/sample.csv", "sample.csv"),
new SelectedItem("./samples/sample.md", "sample.md"),
new SelectedItem("./samples/sample.css", "sample.css"),
new SelectedItem("./samples/sample.js", "sample.js"),
new SelectedItem("./samples/sample.cs", "sample.cs"),
new SelectedItem("./samples/sample.png", "sample.png"),
new SelectedItem("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4", "sample.mp4")
];

private string _doc = "./samples/sample.docx";
}
6 changes: 6 additions & 0 deletions src/BootstrapBlazor.Server/wwwroot/samples/sample.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@import "./lib/jit-viewer.min.css";

.jv-viewer {
width: 100%;
height: 100%;
}
5 changes: 5 additions & 0 deletions src/BootstrapBlazor.Server/wwwroot/samples/sample.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
month,visitors,signups,conversion_rate
2026-01,12840,462,3.60%
2026-02,14320,518,3.62%
2026-03,16790,645,3.84%
2026-04,18160,712,3.92%
100 changes: 100 additions & 0 deletions src/BootstrapBlazor.Server/wwwroot/samples/sample.dxf
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
0
SECTION
2
HEADER
9
$ACADVER
1
AC1009
0
ENDSEC
0
SECTION
2
ENTITIES
0
LINE
8
0
10
0.0
20
0.0
11
160.0
21
0.0
0
LINE
8
0
10
160.0
20
0.0
11
160.0
21
100.0
0
LINE
8
0
10
160.0
20
100.0
11
0.0
21
100.0
0
LINE
8
0
10
0.0
20
100.0
11
0.0
21
0.0
0
LINE
8
0
10
0.0
20
0.0
11
160.0
21
100.0
0
CIRCLE
8
0
10
80.0
20
50.0
40
22.0
0
TEXT
8
0
10
20.0
20
114.0
40
8.0
1
JitViewer DXF Demo
0
ENDSEC
0
EOF
61 changes: 61 additions & 0 deletions src/BootstrapBlazor.Server/wwwroot/samples/sample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { addLink, addScript, getTheme } from '../../BootstrapBlazor/modules/utility.js'
import Data from '../../BootstrapBlazor/modules/data.js'
import EventHandler from "../../BootstrapBlazor/modules/event-handler.js"

export async function init(id, invoke, options) {
await addLink('./_content/BootstrapBlazor.JitViewer/jit-viewer.css');
await addScript('./_content/BootstrapBlazor.JitViewer/lib/jit-viewer.min.js');

const el = document.getElementById(id);
if (el === null) {
return;
}

if (options.locale.startsWith('en')) {
options.locale = 'en';
}

if (options.theme === 'auto') {
options.theme = getTheme();
}

const { createViewer } = window.JitViewer;
const viewer = createViewer({
target: el,
...options
});
viewer.mount();

Data.set(id, {
el,
invoke,
viewer
});

const updateTheme = e => viewer.setTheme(e.theme);
EventHandler.on(document, 'changed.bb.theme', updateTheme);
}

export function setFile(id, file, fileName) {
const data = Data.get(id);
if (data === null) {
return;
}

const { viewer } = data;
if (viewer) {
viewer.setFile(file, fileName);
}
}

export function dispose(id) {
const data = Data.get(id);
if (data === null) {
return;
}

const { viewer } = data;
if (viewer) {
viewer.destroy();
}
}
Comment on lines +51 to +61
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (bug_risk): Data store entries are not cleared on dispose, which can lead to stale references.

dispose destroys the viewer but leaves its entry in Data, which can keep DOM and delegate references alive unnecessarily. After destroying the viewer, also remove the entry (e.g. Data.remove(id)) so the store doesn’t retain stale objects.

Suggested change
export function dispose(id) {
const data = Data.get(id);
if (data === null) {
return;
}
const { viewer } = data;
if (viewer) {
viewer.destroy();
}
}
export function dispose(id) {
const data = Data.get(id);
if (data === null) {
return;
}
const { viewer } = data;
if (viewer) {
viewer.destroy();
}
Data.remove(id);
}

27 changes: 27 additions & 0 deletions src/BootstrapBlazor.Server/wwwroot/samples/sample.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
## Release 2026-04-29 V10.6.0

### Bugs
* fix(Table): update resetTableWidth method by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7836
* fix(DockView): TitleTemplate set ShowClose to false not work by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7875
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (typo): Consider rephrasing this bullet to fix the grammar around "not work".

For example: "TitleTemplate with ShowClose set to false does not work" or "When ShowClose is set to false, TitleTemplate does not work."

Suggested change
* fix(DockView): TitleTemplate set ShowClose to false not work by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7875
* fix(DockView): When ShowClose is set to false, TitleTemplate does not work by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7875

* fix(DataTableDynamicContext): not unload BootstrapBlazor_DynamicAssembly under IsExcel mode by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7900
Comment thread
ArgoZhang marked this conversation as resolved.
* fix(Localizer): makes JsonStringLocalizerFactory thread-safe by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7919

### Features
* feat(Table): add OnAfterDeleteAsync callback on DynamicContext mode by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7832
* feat(Mask): add AppendToBody parameter by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7834
* feat(shadow): add shadow style on invalid form control by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7842
* feat(IP2Region): bump version 10.0.2 by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7848
* feat(Table): update reset column width/order method by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7850
* feat(Browser): remove browser error from check 360se by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7852
* feat(SelectTree): add OnSearchAsync parameter by @Tony-ST0754 in https://github.com/dotnetcore/BootstrapBlazor/pull/7844
* feat(Responsive): add EditorRequired attribute by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7870
* feat(Utility): update getTheme return value by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7874
* feat(DockView): update OnlyWhenVisible render logic by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7879
* feat(ValidateForm): add UnregisterAsyncSubmitButton method by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7889
* feat(DynamicElement): implement IDisposeAsync interface by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7896
* feat(DynamicElement): add OnTouchStart/End parameter by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7898
* feat(EmbedPdf): bump version 10.0.6 by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7903
* feat(ChangeDetectionCleanTask): integrate the cache-cleaning task with dynamic table by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7924
* feat(UniverSheet): bump version 10.0.11 by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7926

**Full Changelog**: https://github.com/dotnetcore/BootstrapBlazor/compare/v10.5.0...v10.6.0
Binary file added src/BootstrapBlazor.Server/wwwroot/samples/sample.ofd
View file
Open in desktop
Binary file not shown.
Binary file added src/BootstrapBlazor.Server/wwwroot/samples/sample.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/BootstrapBlazor.Server/wwwroot/samples/sample.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Bootstrap Blazor is an enterprise-level UI component library based on Bootstrap and Blazor.
Loading