How Developers Embed PDF, Office and CAD Viewing into .NET, React, Angular or Vue Web Apps to Increase User Friendliness and Efficiency: Step by Step

If you’re trying to turn a document‑heavy .NET application into something users actually enjoy, you need a viewer that handles PDFs, Word files, Excel sheets, PowerPoint decks and CAD drawings—all without forcing users to download a desktop app or rely on an external cloud service. That’s where Doconut steps in. It is a server‑side document viewer that streams rendered pages to supported web browsers and provides native annotation, full‑text search (including OCR) and controlled printing out of the box. In this guide we’ll walk through the whole workflow: from configuring Doconut’s conversion engine in an ASP.NET Core back‑end, to embedding the viewer in React, Angular and Vue front‑ends. Ready to ship a smooth, efficient document experience? Let’s dive in.

Server-side .NET document processing connected to document viewers in React, Angular, and Vue applications

1. Why a Dedicated Viewer Matters for Enterprise Web Apps

The hidden cost of “download‑and‑open”

Most legacy portals simply drop a link to a file on a share. Clicking it either downloads the file or hands it off to a locally installed program. In practice this creates several problems:

Lost context – users leave the portal, open the document in a separate window, and then have to remember where they were.
Inconsistent rendering – locally installed Word, Excel and CAD viewers can interpret files differently, leading to layout glitches that can affect legal or engineering decisions.
Security risk – files slip outside the corporate perimeter, making audit trails and data‑loss‑prevention policies a nightmare.
Low productivity – reviewers juggle multiple tools just to annotate, search, or print, slowing down approvals.

What developers actually need

A modern solution should:

Render every supported format in the browser (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
Expose a clean API for .NET back‑ends and React, Angular, or Vue front‑ends.
Include annotation, full‑text search (OCR included) and controlled printing without pulling in extra libraries.
Scale securely—process documents on the server, stream them as image tiles, and never expose raw files to the client.

Doconut checks all those boxes. Its viewer library runs on the .NET server, converts source documents into raster pages on demand, and serves those pages through a lightweight HTTP endpoint consumed by the supported front‑end integrations.

2. Configuring Doconut Middleware for PDF Conversion in an ASP.NET Core Application

The first step is to register Doconut’s middleware so the back‑end can serve document tiles, thumbnails, and annotation data. This is done in the ASP.NET Core request pipeline and requires only a couple of service registrations for caching and request context.

Registering the middleware

Add the required services (distributed memory cache and HTTP context accessor) in ConfigureServices. Then, in Configure, map the Doconut endpoint (commonly DocImage.axd) to the Doconut middleware. The middleware options let you enforce safe rendering and hide internal diagnostics from end users.

Initializing the license

Doconut requires a license file at start‑up. The typical approach is to embed the license as a resource and load it as a stream when the application starts. Once the license stream is provided to the Doconut viewer instance, the SDK is fully activated and ready to process documents.

Opening a document and obtaining a token

When a user requests a document, the back‑end opens the file through Doconut’s API, supplying optional parameters such as password protection, image resolution, and a timeout. Doconut returns a short token (usually a GUID) that uniquely represents the opened document. The front‑end includes this token in every tile request, for example /DocImage.axd?token=abcd1234&page=1&zoom=100.

3. Exposing a Secure Document‑Stream API for JavaScript Frameworks

While Doconut already provides a low‑level tile handler via middleware, most teams prefer a thin wrapper controller that adds authentication, logging, and optional watermarking.

Typical controller responsibilities

Open endpoint – Accepts a document identifier, resolves the physical file path, calls Doconut to open the document, and returns the generated token.
Thumbnail endpoint – Returns a small PNG for a given page, useful for navigation strips. The controller can simply redirect to the Doconut tile handler with the appropriate query string.

Security considerations

Store the token in the user’s session or embed it in a short‑lived JWT claim. Because the token alone cannot retrieve the original file without the server‑side cache, the document remains protected. The same REST API supports the React, Angular, and Vue integration patterns described in this guide.

4. Embedding the Viewer in a React Application

React developers can create a functional component that:

Calls the /open endpoint to fetch a token for the requested document.
Builds an array of image URLs that point to Doconut’s tile handler for each page (you can start with the first ten pages and load more on demand).
Renders the pages as <img> elements, handling scroll or zoom events by updating the URL parameters.

Interaction with Doconut’s JavaScript integration points

Doconut injects a lightweight JavaScript helper into the page. Through this helper you can issue commands such as:

Highlight a term – request a full‑text search across the document and highlight matching words.
Add an annotation – place a sticky note, stamp, or drawing on a specific page by sending a JSON payload that includes page number, annotation type, coordinates, and any additional data.

Because the heavy rendering work stays on the server, the React bundle remains small and the UI stays responsive.

5. Embedding the Viewer in Angular and Vue – Reusable Component Patterns

Angular

Create an Angular service that mirrors the tiny .NET API (open document, fetch thumbnail). The service uses HttpClient to call the back‑end endpoints and returns the token as an observable.

Then build a component that, on initialization, requests the token, constructs the page image URLs, and displays them with *ngFor. The component can expose buttons that call Doconut’s JavaScript helper for annotation and search, similar to the React example.

Vue

In Vue, define a component that uses the created lifecycle hook to request the token via fetch or axios. Store the token and generated page URLs in the component’s data object. Render the pages with a v-for loop. Vue’s reactivity makes it straightforward to update the view when the user scrolls, zooms, or triggers an annotation action through Doconut’s JavaScript integration.

All three frameworks share the same back‑end contract, so you can reuse the same ASP.NET Core controller without modification.

Conclusion

Embedding a full‑featured document viewer no longer requires a mosaic of third‑party plugins or costly cloud services. With Doconut, developers get a single, server‑side library that renders PDF, Office and CAD files, provides annotation, OCR‑powered search, and controlled printing—all while keeping documents secure and scalable.

Ready to elevate the document experience in your .NET, React, Angular, or Vue application? Try Doconut today and see how quickly you can ship a polished, enterprise‑grade viewer that your users will love.