PDF.js is a JavaScript library maintained by Mozilla and other individual contributors. In the latest release candidate of the TX Text Control Document Viewer, we introduced the ability to enable external renderers such as PDF.js to provide document rendering information.

This tutorial shows how to create a new ASP.NET Core Web App that uses the DocumentViewer TX Text Control .NET Server for ASP.NET
Web.MVC.DocumentViewer Namespace
DocumentViewer Class
The DocumentViewer class represents an extension object implementing the TX Text Control DocumentViewer functionality.
in combination with PDF.js to render PDF documents.

Creating the Application

Make sure that you downloaded the latest version of Visual Studio 2022 that comes with the .NET 6 SDK or .NET 7 SDK.

  1. In Visual Studio 2022, create a new project by choosing Create a new project.

  2. Select ASP.NET Core Web App (Model-View-Controller) as the project template and confirm with Next.

  3. Choose a name for your project and confirm with Next.

  4. In the next dialog, choose .NET 6 (Long Term Support) as the Framework and confirm with Create.

    Creating the .NET 6 project

Adding the NuGet Packages

  1. In the Solution Explorer, select your created project and choose Manage NuGet Packages... from the Project main menu.

    Select Text Control Offline Packages from the Package source drop-down.

    Package Source

    Select either Text Control Offline Packages or nuget.org as the Package source. Packages in the official Text Control NuGet profile are frequently updated.

    In case you are using a Trial Access Token, please choose nuget.org.

    Install the latest versions of the following package:

    • TXTextControl.TextControl.ASP.SDK
    • TXTextControl.Web.DocumentViewer

    ASP.NET Core Web Application

  2. Switch the package source to nuget.org and choose Installed to check for available updates. Make sure to check "Include prerelease" to get the release candidate listed. Update the installed packages to the latest version.

    ASP.NET Core Web Application

Adding PDF.js

  1. Select the project in the Solution Explorer and choose Add ->Client-Side Library... from the right-click context menu.

  2. In the opened dialog box, search for pdf.js by typing it into the Library: text box. Click Install to add the required files to your project.

    ASP.NET Core Web Application

Adding a PDF Document

  1. Select the project in the Solution Explorer and add a folder named App_Data by clicking Project -> New Folder from the main menu. Add any PDF document to this folder and name it test.pdf.

Adding the Control to the View

  1. Find the Index.cshtml file in the Views -> Home folder. Replace the complete content with the following code:

    @using TXTextControl.Web.MVC.DocumentViewer
    <div style="width: 800px; height: 600px;">
    @Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentPath = "App_Data/test.pdf";
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.DocumentLoadSettings.PDFJS.BasePath = "lib/pdf.js/";
    }).Render()
    </div>
    view raw test.cshtml hosted with ❤ by GitHub

Using CDN Package Sources

In the example above, the PDF.js files are imported directly into the project. If you want to link to a CDN-hosted version, simply add the full path to the BasePath property.

using TXTextControl.Web.MVC.DocumentViewer
<div style="width: 800px; height: 600px;">
@Html.TXTextControl().DocumentViewer(settings => {
settings.DocumentPath = "App_Data/test.pdf";
settings.Dock = DocumentViewerSettings.DockStyle.Fill;
settings.DocumentLoadSettings.PDFJS.BasePath = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146";
}).Render()
</div>
view raw test.cshtml hosted with ❤ by GitHub
  1. Compile and start the application. In the F12 developer tools console, you can see whether PDF.js is used to render the loaded PDF document.

    ASP.NET Core Web Application

Loading PDF Documents using JavaScript

PDF documents can be loaded using JavaScript into the Document Viewer as a Base64-encoded string. The DocumentLoadSettings must be passed as a JSON object to the loadDocument method:

var loadSettings = { pdfjs: { basePath: "lib/pdf.js/" } }
TXDocumentViewer.loadDocument(data, "loaded.pdf", null, loadSettings);
view raw test.js hosted with ❤ by GitHub