本指南将一个空的 Program.cs ASP.NET Core 应用转变为在浏览器中渲染文档的完整过程：服务器注册、完整的 Viewer 包（Viewer 工具栏、Viewer 挂载点以及可选的搜索/批注功能区）、资源引用、客户端初始化、文档打开以及执行。

服务器设置

AddDoconut() 注册服务；UseDoconutResources() 和 UseDoconut() 连接中间件。资源调用必须先于其他调用。会话调用也是必需的——Doconut 的默认文档安全会对每个页面请求进行 ASP.NET 会话状态验证。会话状态需要缓存：AddDistributedMemoryCache() 提供缓存。MVC 或 Razor Pages 应用已经注册了它，但最小 API 应用没有，没有它应用将在启动时因 Unable to resolve service for type 'IDistributedCache' 而停止。已经在Installation 中注册了 Doconut？请跳到下一节。

csharp

builder.Services.AddDoconut(options =>
{
    options.LicensePath = "Doconut.Viewer.lic";
});
builder.Services.AddDistributedMemoryCache(); // 会话状态需要缓存（MVC/Razor Pages 已经添加了一个）
builder.Services.AddSession(); // Doconut 文档安全依赖于 ASP.NET 会话状态

app.UseSession();          // 在 UseDoconut() 之前调用 UseSession()
app.UseDoconutResources(); // 必须在 UseDoconut() 之前注册
app.UseDoconut();

对于生产风格的路径布局，将文档中间件映射到显式分支并保持四个路径设置一致：

csharp

builder.Services.AddDoconut(options =>
{
    options.LicensePath = Path.Combine(AppContext.BaseDirectory, "wwwroot", "Doconut.Viewer.lic");
    options.MiddlewarePath = "/doconut";
    options.ResourcesPath = "/doconut-res";
    options.UnsafeMode = false;
});
builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession();

app.UseRouting();
app.UseSession();
app.UseDoconutResources();
app.Map("/doconut", branch => branch.UseDoconut());

MiddlewarePath 是一个协调值；它本身并不会映射 ASP.NET Core 分支。在本例中主机映射了 /doconut，因此客户端使用 BasePath: 'doconut'。ResourcesPath 在 /doconut-res 提供嵌入式包，部件的图像资源路径因此为 ResPath: 'doconut-res/images'。两者都 不要以斜杠开头：viewer 会自行添加斜杠，所以 '/doconut' 会变成 //doconut/DocImage.axd，浏览器会将其解释为对名为 doconut 的主机的请求，导致 viewer 报错 “The viewer handler could not be reached”。

将查看器添加到页面

Viewer 是页面必需的核心。它的渲染表面使用两个嵌套的 div：

html

<div id="divDocViewer">
    <div id="div_ctlDoc"></div>
</div>

将工具栏、模块挂载点和 Viewer 表面视为同一页面组合。搜索和批注会将其嵌入式功能区注入可选挂载点，但这些模块从不单独存在：它们始终附着在同一页面的 Viewer 上。使用与 Doconut.TestApp 和 Doconut.TestApp.Distributed 相同的顺序：

html

<nav id="toolbar" aria-label="Document viewer controls">
    <!-- Viewer 导航、缩放、搜索和批注按钮 -->
</nav>

<div id="searchBarMount"></div>
<div id="annBarMount"></div>

<div id="divDocViewer">
    <div id="div_ctlDoc"></div>
</div>

引用查看器资源

在 Razor 视图中，注入的 Viewer 服务会按依赖顺序输出 viewer 的 <link> 和 <script> 标签——部件是 jQuery 插件，因此必须先加载 jQuery 再加载 viewer 脚本：

html

@inject Doconut.Viewer Viewer

@Html.Raw(Viewer.ReferenceCss(new CssConfig
{
    IncludeBootstrapCss = true,
    IncludeViewerCss    = true
}))

@Html.Raw(Viewer.ReferenceScripts(new ScriptConfig
{
    IncludeJQuery        = true,
    IncludeBootstrap     = true,
    IncludeViewerScripts = true
}))

若需完整的 Viewer 包，请一起请求 Viewer 与模块资源：

html

@Html.Raw(Viewer.ReferenceCss(new CssConfig
{
    IncludeBootstrapCss  = true,
    IncludeViewerCss     = true,
    IncludeSearchCss     = true,
    IncludeAnnotationCss = true
}))

@Html.Raw(Viewer.ReferenceScripts(new ScriptConfig
{
    IncludeJQuery             = true,
    IncludeBootstrap         = true,
    IncludeViewerScripts     = true,
    IncludeSearchScripts     = true,
    IncludeSearchBar         = true,
    IncludeAnnotationScripts = true,
    IncludeAnnotationBar     = true
}))

IncludeViewerCss 和 IncludeViewerScripts 是必需的核心标志。切勿在未包含它们、Viewer 挂载点以及 docViewer 实例的情况下发布搜索或批注功能区示例。ReferenceCss 与 ReferenceScripts 会在当前许可证未授予相应功能时省略可选模块的资源；核心 Viewer 仍能启动。

初始化查看器

客户端小部件是一个 jQuery 插件。这是一组真实的最小初始化选项（不是伪代码）：

javascript

let searchBar = null;
let annBar = null;

const objViewer = $('#div_ctlDoc').docViewer({
    showThumbs: true,
    autoLoad:   false,
    pageZoom:   100,
    FitType:    'width',
    BasePath:   'doconut',             // 没有前导 '/'
    ResPath:    'doconut-res/images',  // 没有前导 '/'
    onViewerReady: function () {
        // 页面已可见；此处可以安全地隐藏加载指示器
    },
    // 将注释生命周期事件转发到嵌入的功能区（如果存在）。
    onAnnLoaded:    () => annBar?.handleAnnLoaded(),
    onAnnSaved:     () => annBar?.handleAnnSaved(),
    onAnnSaveError: () => annBar?.handleAnnSaveError(),
    onAnnClosed:    () => annBar?.handleAnnClosed(),
    onError: function (message) {
        console.error('Doconut viewer error:', message);
    }
});

选项的大小写确实混杂——showThumbs、autoLoad 和 pageZoom 使用 camelCase，而 FitType、BasePath 和 ResPath 使用 PascalCase。没有统一的规则；大小写写错时选项会被静默忽略（小部件会回退到默认值而不是抛出错误）。

组装完整的 Viewer 包

两个 .NET 8 参考应用程序在同一页面上一起安装以下部件：

包的部分	需求	连接方式
Viewer 资源、挂载和 `objViewer`	必需	核心文档渲染器
Viewer 工具栏	在参考组合中必需	宿主标记；按钮调用相同的 `objViewer`
搜索功能区	可选，授权模块	`doconutSearchBar(...).attach(objViewer)`
注释功能区	可选，授权模块	`doconutAnnotationBar(...).attach(objViewer)`

虽然主 Viewer 工具栏是宿主标记，但它与 Viewer 一起安装，绝不能被文档化为独立控件。这使得其布局、标签、图标和授权规则始终受你的应用程序控制，同时每个按钮都驱动同一个 Viewer 实例：

html

<nav id="toolbar" aria-label="Document viewer controls">
    <button type="button" onclick="objViewer.GotoPage(1)">First</button>
    <button type="button" onclick="objViewer.Next(false)">Previous</button>
    <button type="button" onclick="objViewer.Next(true)">Next</button>
    <button type="button" onclick="objViewer.GotoPage(objViewer.TotalPages())">Last</button>
    <button type="button" onclick="objViewer.Zoom(false)">Zoom out</button>
    <button type="button" onclick="objViewer.Zoom(true)">Zoom in</button>
    <button type="button" onclick="objViewer.FitType('width')">Fit width</button>
    <button type="button" onclick="objViewer.FitType('height')">Fit height</button>
    <button type="button" id="openSearch">Search</button>
    <button type="button" id="openAnnotations">Annotations</button>
</nav>

完整的参考工具栏还会将 wwwroot/js/viewerToolbar.js 复制到宿主应用程序中，以提供旋转、缩略图、打印、全屏、布局和按钮状态的辅助功能。请在 Viewer.ReferenceScripts(...) 之后加载该宿主文件。复制完整演示实现时，请将辅助脚本与其 <nav id="toolbar"> 标记一起保留。

保持两个参考应用程序使用的包初始化顺序：

一起发出 Viewer、Search 和 Annotation 资源。
一起渲染 Viewer 工具栏、功能区挂载点和 Viewer 挂载点。
首先初始化 docViewer。
创建每个授权的功能区并将其附加到同一个 objViewer。
打开文档并保留其 token 以供模块请求使用。

Doconut.TestApp.Distributed 保持了此确切的 UI 组合以及相同的 Viewer‑toolbar 辅助脚本。其额外的 access 请求值和异步渲染重试设置属于分布式传输；它们不会改变 Viewer、工具栏或功能区的组装方式。

服务器端的防护很重要：当可选功能不可用时，其脚本不会被发出，因此对应的 jQuery 插件函数不存在。

html

<script>
    let currentToken = '';

    const refitViewer = () =>
        requestAnimationFrame(() => objViewer.Refit());

    @if (Viewer.IsSearchEnabled)
    {
        <text>
    searchBar = $('#searchBarMount').doconutSearchBar({
        docId: 'ctlDoc',
        getRequestParams: () => ({ token: currentToken }),
        onLayout: refitViewer
    });
    searchBar.attach(objViewer);
        </text>
    }

    @if (Viewer.IsAnnotationEnabled)
    {
        <text>
    annBar = $('#annBarMount').doconutAnnotationBar({
        docId: 'ctlDoc',
        getRequestParams: () => ({ token: currentToken }),
        onLayout: refitViewer
    });
    annBar.attach(objViewer);
        </text>
    }

    document.getElementById('openSearch').addEventListener('click', () => {
        if (!searchBar) return;
        searchBar.isOpen() ? searchBar.close() : searchBar.open();
    });

    document.getElementById('openAnnotations').addEventListener('click', () => {
        if (!annBar) return;
        annBar.isOpen() ? annBar.close() : annBar.open();
    });
</script>

两个嵌入组件各自生成自己的功能区 DOM。Search 包含 “Find”、 “Options” 和 “Results” 组。Annotation 包含其创作工具、样式控制、保存操作以及可选的导出/图像操作。功能区公开 open()、close()、reset() 和 isOpen()；在创建后始终调用一次 attach(objViewer)。

上面的示例省略了可选的宿主回调和 Annotation 导出/图像端点，以保持启动时的最小化。请参阅搜索和注释了解完整的特定功能设置，或查看自定义主题以为宿主拥有的 Viewer 工具栏设置样式或替换它。

打开文档

服务器端只有一个端点：注入的 Viewer 服务打开文档并返回会话令牌。

csharp

app.MapPost("/api/open", async (Viewer viewer) =>
{
    // 令牌是不透明的——将其交给小部件，切勿记录或持久化它。
    string token = await viewer.OpenDocumentAsync("wwwroot/files/Sample.pdf");
    return Results.Ok(new { token });
});

客户端获取该令牌并使用 objViewer.View(token) 将其交给小部件：

javascript

fetch('/api/open', { method: 'POST' })
    .then(resp => resp.json())
    .then(data => {
        currentToken = data.token;
        objViewer.View(currentToken);
    });

关闭文档

当用户离开查看器或打开替换文档时，调用 objViewer.Close()。在服务器驱动的工作流中，viewer.CloseDocument(token) 会立即移除缓存的会话，释放渲染引擎，删除其安全标记，并撤销令牌。滑动过期最终会执行相同的清理，但对于大文档，建议显式关闭。

已完成的请求流程如下：

text

AddDoconut + middleware
    -> render CSS/scripts and mount div
    -> initialize docViewer
    -> OpenDocumentAsync
    -> return opaque token
    -> objViewer.View(token)
    -> page/search/annotation requests
    -> Close / CloseDocument

将令牌视为持有者凭证：切勿记录，切勿持久化，只交给小部件。它标识服务器上的活跃文档会话，当该会话过期时令牌失效——重新打开文档即可获取新的令牌。

运行

将 PDF 放置在 wwwroot/files/Sample.pdf，运行 dotnet run，然后打开承载小部件的页面。第一页会在查看器中渲染，左侧显示缩略图面板。如果未渲染，请参阅故障排除。

未授权时的功能

缺少许可证不会抛出异常。查看器仍然正常渲染，但每页都会带有评估水印。请参阅许可证设置了解 Doconut 如何查找许可证以及找到后会有哪些变化。