Document Viewer in Asp.Net Core 3.0 Application

In this tutorial, we are going to cover how to implement Document Viewer in Asp.Net Core 3.0 application using visual studio 2019. There are many file viewer libraries for .NET Framework. But now in this tutorial, we will use GroupDocs.Viewer to preview files in different formats like pdf, docs, excel, power point, outlook, visio, and many others in Asp.Net Core 3.0 application. And if you want to read more features about GroupDocc.Viewer, then you can read here.

So, first-of-all, we will create Asp.Net Core 3.0 application in visual studio 2019 and then we will install GroupDocs.Viewer in Asp.Net Core 3.0 application and then we will see how to implement in Asp.Net Core 3.0 application.

Document Viewer in Asp.Net Core 3.0 Application

Let’s see how to implement Document Viewer in Asp.Net Core 3.0 application using a simple example in step by step.

Step # 1: Create Asp.Net Core 3.0 Application uisng visual studio 2019

First-of-all, in this step we will create a new Asp.Net Core 3.0 application using visual studio 2019. So, go to visual studio 2019 and then click on the “Create a new project” button and then select “ASP.NET Core Web Application” template and then click on the “Next” button. Now, enter the name in the “Project name” field and then choose “Location” and then click on the “Create”button.

Now, select “ASP.NET Core 3.0” from the drop-down and then select “Web Application (Model-View-Controller)” template and then click on the “Create” button as you do see below in the screenshot. It will create a new project with Model-View-Controller template with some default files.

Step # 2: Install Document Viewer from NuGet package

Now, in this step we will install the GroupDocs.Viewer in Asp.Net Core 3.0 application. So, go to Tools and then NuGet Package Manager  and then Click on the Manage NuGet Packages for Solutions… and then install the package as you do see below in the screenshot.

Step # 3: Implement GroupDocs.Viewer in Asp.Net Core 3.0 application

Now, in this step we will see how to implement GroupDocs.Viewer in Asp.Net Core 3.0 application. So, go to project folder structure and then go to Controllers folder and then go to HomeController and then write some code as you do see below in the file.

Let’s understand the above code.

Line # 20, 26 and 29: here in this line, we are injecting IHostingEnvironment to HomeController.

Line # 40 to 45: here in this block of code, we are getting all the files from the directory and then add to a list. And then this list will be passed to view using ViewBag.

Line # 57: here in this line, we will get the file path which we want to preview in our application.

Line # 58 to 61: here in this block of code, we will see if the file directory doesn’t exist, then it will create a new directory.

Line # 64 to 71: Now in this block of code, we will get the document info and then we will set the view option and then render the document. And then we will return the result in the json format.

Now, go to Views folder and then Home folder and then Index view and then write some code as you do see below in the Index file.

Let’s understand the above code.

Line # 12 to 28: here in this block of code we are calling Index POST method using ajax. And then it will get the data and then append the returned data using for loop.

Line # 43 to 46: here in this block of code we are showing all the file names using foreach loop.

Line # 50 to 54: this block of code will preview the file.

Run Project

Now, run your project by pressing f5 and then you will see the output page with a list of all file names. Now, click on any file name from sidebar and then you will see the output page as you do see below in the screenshot.

Image Preview:

Excel Preview:

Thank you for reading. Please keep visiting and sharing this blog within your community.