feat(JitViewer): add JitViewer component (#8024)

ArgoZhang · web-flow · commit 18056d5aeac3 · 2026-05-20T13:07:30.000+08:00
* chore: 调整顺序

* chore: 增加 JitViewers 映射关系

* chore: 增加 JitViewer 文件预览器菜单

* doc: 增加 JitViewer 示例文件

* doc: 更新示例

* doc: 增加 JitViewer 依赖

* doc: 更新多语言资源文件

* doc: 更新示例文档
diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -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" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/JitViewers.razor b/src/BootstrapBlazor.Server/Components/Samples/JitViewers.razor
@@ -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>
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/JitViewers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/JitViewers.razor.cs
@@ -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";
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -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"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -292,6 +292,7 @@
     "IntersectionObserver": "IntersectionObserver",
     "Introduction": "Introduction",
     "Ip": "IpAddress",
+    "JitViewer": "JitViewer",
     "JSExtension": "JSRuntime Extensions",
     "Labels": "Labels",
     "Layout": "Layout",
@@ -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",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -292,6 +292,7 @@
     "IntersectionObserver": "交叉观察者 IntersectionObserver",
     "Introduction": "简介",
     "Ip": "IP 地址 IpAddress",
+    "JitViewer": "文件预览器 JitViewer",
     "JSExtension": "JSRuntime 扩展",
     "Labels": "表单标签",
     "Layout": "布局组件 Layout",
@@ -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",
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
@@ -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",
@@ -90,7 +91,6 @@
     "html-renderer": "HtmlRenderers",
     "html2image": "Html2Images",
     "html2pdf": "Html2Pdfs",
-    "dom2image": "Dom2Images",
     "label": "Labels",
     "layout": "Layouts",
     "light": "Lights",
@@ -108,6 +108,7 @@
     "input-group": "InputGroups",
     "ip": "Ips",
     "intersection-observer": "IntersectionObservers",
+    "jit-viewer": "JitViewers",
     "mask": "Masks",
     "markdown": "Markdowns",
     "marquee": "Marquees",
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.cs b/src/BootstrapBlazor.Server/wwwroot/samples/sample.cs
@@ -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";
+}
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.css b/src/BootstrapBlazor.Server/wwwroot/samples/sample.css
@@ -0,0 +1,6 @@
+@import "./lib/jit-viewer.min.css";
+
+.jv-viewer {
+    width: 100%;
+    height: 100%;
+}
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.csv b/src/BootstrapBlazor.Server/wwwroot/samples/sample.csv
@@ -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%
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.dxf b/src/BootstrapBlazor.Server/wwwroot/samples/sample.dxf
@@ -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
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.js b/src/BootstrapBlazor.Server/wwwroot/samples/sample.js
@@ -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();
+    }
+}
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.md b/src/BootstrapBlazor.Server/wwwroot/samples/sample.md
@@ -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
+* fix(DataTableDynamicContext): not unload BootstrapBlazor_DynamicAssembly under IsExcel mode by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/7900
+* 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
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.ofd b/src/BootstrapBlazor.Server/wwwroot/samples/sample.ofd
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.png b/src/BootstrapBlazor.Server/wwwroot/samples/sample.png
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.txt b/src/BootstrapBlazor.Server/wwwroot/samples/sample.txt
@@ -0,0 +1 @@
+Bootstrap Blazor is an enterprise-level UI component library based on Bootstrap and Blazor.
