开发者如何在 .NET、React、Angular 或 Vue Web 应用中嵌入 PDF、Office 和 CAD 查看功能，以提升用户友好性和效率：一步步指南

如果你正尝试将一个文档繁重的 .NET 应用转变为用户真正喜欢使用的产品，你需要一个能够处理 PDF、Word 文件、Excel 表格、PowerPoint 幻灯片以及 CAD 图纸的查看器——且无需强迫用户下载桌面应用或依赖外部云服务。这正是 Doconut 的用武之地。它是一个服务器端文档查看器，能够将渲染后的页面流式传输到受支持的网页浏览器，并提供原生批注、全文搜索（包括 OCR）以及开箱即用的受控打印功能。在本指南中，我们将完整演示工作流：从在 ASP.NET Core 后端配置 Doconut 转换引擎，到在 React、Angular 和 Vue 前端嵌入查看器。准备好交付流畅、高效的文档体验了吗？让我们开始吧。

服务器端 .NET 文档处理连接到 React、Angular 和 Vue 应用中的文档查看器

1. 为什么企业级 Web 应用需要专用查看器

“下载‑打开” 的隐藏成本

大多数传统门户仅在共享目录上放置一个文件链接。点击后要么下载文件，要么交给本地已安装的程序打开。实际上，这会产生多个问题：

上下文丢失 – 用户离开门户，在单独的窗口中打开文档后，需要记住自己之前所在的位置。
渲染不一致 – 本地安装的 Word、Excel 和 CAD 查看器对文件的解释可能不同，导致布局错位，进而影响法律或工程决策。
安全风险 – 文件脱离企业防火墙，审计追踪和数据防泄漏策略变得异常困难。
生产力低下 – 审阅者必须切换多个工具才能进行批注、搜索或打印，导致审批流程变慢。

开发者真正需要的是什么

现代解决方案应当：

在浏览器中渲染所有受支持的格式（PDF、DOCX、XLSX、PPTX、DWG、DXF，……）。
提供简洁的 API，供 .NET 后端以及 React、Angular 或 Vue 前端调用。
内置批注、全文搜索（含 OCR）和受控打印，无需额外引入库。
安全可扩展——在服务器上处理文档，按图块流式传输，并且永不向客户端暴露原始文件。

Doconut 完全满足这些要求。其查看器库运行在 .NET 服务器上，按需将源文档转换为光栅页面，并通过轻量级 HTTP 端点将页面提供给前端集成。

2. 在 ASP.NET Core 应用中配置 Doconut 中间件进行 PDF 转换

第一步是注册 Doconut 中间件，使后端能够提供文档图块、缩略图和批注数据。这在 ASP.NET Core 请求管道中完成，只需进行少量服务注册用于缓存和请求上下文。

注册中间件

在 ConfigureServices 中添加所需服务（分布式内存缓存和 HTTP 上下文访问器）。随后，在 Configure 中将 Doconut 端点（通常为 DocImage.axd）映射到 Doconut 中间件。中间件选项可让你强制安全渲染并隐藏内部诊断信息。

初始化许可证

Doconut 需要在启动时加载许可证文件。常见做法是将许可证嵌入为资源，并在应用启动时以流的形式读取。一旦将许可证流提供给 Doconut 查看器实例，SDK 即被完全激活，准备好处理文档。

打开文档并获取令牌

当用户请求文档时，后端通过 Doconut API 打开文件，可传入密码保护、图像分辨率和超时等可选参数。Doconut 返回一个短令牌（通常为 GUID），唯一标识已打开的文档。前端在每次请求图块时都需携带该令牌，例如 /DocImage.axd?token=abcd1234&page=1&zoom=100。

3. 为 JavaScript 框架提供安全的文档流 API

虽然 Doconut 已经通过中间件提供了低层的图块处理器，但大多数团队更倾向于使用一个薄包装的控制器来加入身份验证、日志记录以及可选的水印功能。

控制器的典型职责

打开端点 – 接收文档标识符，解析物理文件路径，调用 Doconut 打开文档，并返回生成的令牌。
缩略图端点 – 为指定页返回小尺寸 PNG，供导航条使用。控制器可以直接重定向到 Doconut 图块处理器并附加相应查询字符串。

安全考虑

将令牌存入用户会话或嵌入短期 JWT 声明中。因为仅凭令牌无法在没有服务器端缓存的情况下获取原始文件，文档仍然受到保护。相同的 REST API 同时支持本指南中描述的 React、Angular 与 Vue 集成模式。

4. 在 React 应用中嵌入查看器

React 开发者可以创建一个函数式组件，完成以下工作：

调用 /open 端点获取请求文档的令牌。
构建指向 Doconut 图块处理器的图像 URL 数组（可以先加载前十页，随后按需加载更多）。
将页面渲染为 <img> 元素，并通过更新 URL 参数来处理滚动或缩放事件。

与 Doconut JavaScript 集成点的交互

Doconut 会向页面注入一个轻量级 JavaScript 助手。通过该助手，你可以发出如下指令：

高亮关键词 – 发起全文搜索并高亮文档中匹配的词语。
添加批注 – 在特定页面放置便签、印章或绘图，只需发送包含页码、批注类型、坐标以及其他数据的 JSON 负载。

由于繁重的渲染工作仍在服务器端完成，React 包体积保持小巧，UI 也保持响应流畅。

5. 在 Angular 与 Vue 中嵌入查看器 – 可复用的组件模式

Angular

创建一个 Angular 服务，封装 .NET 微小 API（打开文档、获取缩略图）。该服务使用 HttpClient 调用后端端点，并将令牌作为 Observable 返回。

随后构建一个组件，在初始化时请求令牌、构造页面图像 URL，并使用 *ngFor 渲染页面。组件可提供按钮，调用 Doconut 的 JavaScript 助手实现批注和搜索，方式与 React 示例相同。

Vue

在 Vue 中，定义一个组件，在 created 生命周期钩子中通过 fetch 或 axios 请求令牌。将令牌和生成的页面 URL 存入组件的 data 对象。使用 v-for 循环渲染页面。Vue 的响应式特性使得在用户滚动、缩放或通过 Doconut JavaScript 集成触发批注操作时，视图能够轻松更新。

这三种框架共享相同的后端契约，因此可以在不做任何修改的情况下复用同一个 ASP.NET Core 控制器。

结论

嵌入功能完整的文档查看器不再需要拼凑各种第三方插件或昂贵的云服务。借助 Doconut，开发者只需使用一个服务器端库即可渲染 PDF、Office 与 CAD 文件，提供批注、OCR 驱动的搜索以及受控打印——同时确保文档的安全性与可扩展性。

准备好在你的 .NET、React、Angular 或 Vue 应用中提升文档体验了吗？立即尝试 Doconut，感受多快就能交付一款精致、企业级的查看器，让用户爱不释手。