开发者如何在 .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，……）。
为 .NET 后端以及 React、Angular 或 Vue 前端提供简洁的 API。
内置批注、全文搜索（含 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 包体积保持小巧，界面保持响应。

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，看看您多快就能交付一个精致、企业级的查看器，让用户爱不释手。