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 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.

   

Adding the NuGet Packages

5. 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

   

6. 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.

   

Adding PDF.js

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

8. 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.

   

Adding a PDF Document

9. 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

10. 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>

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>

11. 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.

    

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);