Get started with Apryse WebViewer SDK in a Blazor Project

The Apryse WebViewer SDK delivers high-quality rendering, conversion, and document manipulation capabilities through a single, customizable component. Supporting PDF, Office, CAD, and images, it's fully featured out of the box, delivering great usability and functionality.

Adding WebViewer to your application allows users to view and edit PDFs without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

This guide walks you through how to integrate the WebViewer SDK into your Blazor application. By the end, you'll be able to render a PDF document in the UI.

You can also download a ready-to-go sample on GitHub for Blazor server sample or for Blazor wasm sample.

Get started with the Apryse WebViewer SDK in a Blazor project by viewing our video. This video includes instructions for successfully integrating the WebViewer SDK into your Blazor application. You can also skip the video and, instead, follow the steps below to get started.

Prior to starting, you should:

• Install Node and npm to use as your run-time environment and package manager.
• Download and install the .NET 9+ SDK for your platform to build and run your application using C#.
• Open Visual Studio Code. Make sure you're logged in to VSC so you are able to use the functionality you'll need to use for this tutorial.
• Install the C# Dev Kit in Visual Studio Code. It makes C# development easier.
• Get your Apryse trial key.

1. Open Visual Studio Code (VSC), then open VSC's Command Palette at the top of the screen by pressing CMD+SHIFT+P.
2. Enter .NET into the Palette search, then select .NET: New Project from the dropdown.

The Command Palette in Visual Studio Code

3. In the Command Palette, find and select the Blazor Web App option for your template, then press Enter.

4. Select where you want the project to sit.

5. Select the default Solution File Format that displays in the Palette, which is .sln, then press Enter.

6. View the project in your Solution Explorer on the left side of VSC.

Solution Explorer tree in Visual Studio Code with your Blazor project files

Enter the following on the command line to navigate into your new project, replacing <projectName> with the name of your project:

1cd <projectName>

1. Enter the following command on the command line from your new project directory to create a package.json file within your project:

1npm init

2. Next, click Enter on your keyboard.

3. Enter configurations for your project on the command line. You may enter any values you like. We'll use the default values for this tutorial.

Configuration options on command line when you initialize the project

After answering all the configurations, you should have a package.json file in the folder you created.

From your project directory on the command line, install WebViewer into your project:

1npm i @pdftron/webviewer

1. Click the Run and Debug button on the left side of VSC.

the Run and Debug button in Visual Studio Code

2. Click Run and Debug to run the project.

3. Search for and select C# in the debugger dropdown that displays.

4. Search for and select <projectName> [Default Configuration] demo option in the Debugger options that display after you select C#. You'll replace <projectName> with your project's name.

VSC displays the web app. You'll use this option later to view the WebViewer UI and a PDF.

You have to copy the static assets required for WebViewer to run. The files must be moved into a location that will be served and publicly accessible.

1. Via your text editor in the Solution Explorer tree, create a subfolder within the existing wwwroot/lib folder and name it webviewer.

2.Create a subfolder within wwwroot/lib/webviewer and name it public.

3. In your <PROJECTNAME> EXPLORER tree, go to node_modules/@pdftron/webviewer/public, then copy the following folders and file:

• core
• ui
• webviewer.mn.js

WebViewer files in the node_modules folder

3. Paste the select folders you copied to the new lib/webviewer/public folder that will be served.

Alternatively, you can read more about copying WebViewer static assets to automate the process.

Via VSC in the SOLUTION EXPLORER tree in your main application file, Components/App.razor, load the WebViewer library by adding the following script tag after <HeadOutlet /> and before </head>:

1 <script src="@Assets["lib/webviewer/public/webviewer.min.js"]"></script>

1. Via VSC in the SOLUTION EXPLORER tree, highlight the Components folder.
2. Click the File+ icon. The New File options display in a dropdown.
3. Search for and select Razor Component.
4. Name your component WebViewer.
5. Press Enter.

6. Add the following code to the new file, keeping in mind the following:

• At the top you have a div element for WebViewer that will be mounted.
• path is the path to the copied static assets.
• An initial PDF document is specified to open when WebViewer starts using the initialDoc parameter.
• Add your own license key in place of 'YOUR_LICENSE_KEY'. If you've created your license key and you're logged in, your key is already in the code below.

1<div id='viewer' style='width: 100%; height: 100%; margin: 0 auto;'></div>
2
3<script>
4  window.WebViewer({
5    path: '/lib/webviewer/public',
6    initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
7    licenseKey: 'YOUR_LICENSE_KEY',
8  }, document.getElementById('viewer')).then((instance) => {
9
10  })
11</script>

You can now use this component elsewhere in your app by simply using <WebViewer />.

7. For example, Via VSC in the Solution Explorer tree, in Components/Pages/Home.razor, replace the code in the file with the following code to load WebViewer:

1@page "/"
2
3<WebViewer />
4

After you've saved all of the files, you'll run the project so you can see the WebViewer UI and the PDF you included to open in WebViewer.

1. Click the Run and Debug button on the left side of VSC.
2. Click the Restart button at the top of VSC. Once the project has run, VSC displays the web app and you see the WebViewer UI and the PDF you programmed to open.

Restart button in Visual Studio Code

WebViewer contains numerous different file types (WASM, GZ, BR) that the server needs to know how to handle. In order to tell Blazor how to serve these assets properly, you can configure the MIME types.

In Program.cs, add the following code to apply the proper MIME types.

1var provider = new FileExtensionContentTypeProvider();
2provider.Mappings[".res"] = "application/octet-stream";
3provider.Mappings[".pexe"] = "application/x-pnacl";
4provider.Mappings[".nmf"] = "application/octet-stream";
5provider.Mappings[".mem"] = "application/octet-stream";
6provider.Mappings[".wasm"] = "application/wasm";
7
8app.UseStaticFiles(new StaticFileOptions
9{
10    FileProvider = new PhysicalFileProvider(
11        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
12        ContentTypeProvider = provider
13});
14