Search results

Client-side application in Blazor PDF Viewer component

Note: There is a separate PDF Viewer component for Blazor server-side and Blazor client-side applications.

  • The SfPdfViewerServer control is for Blazor server-side application. This control resides with Syncfusion.Blazor.PdfViewerServer.Windows NuGet package. This server-side control is highly recommended.
  • The SfPdfViewer control is for Blazor client-side application. This control requires server-side processing to render the PDF files through web service. It resides with Syncfusion.Blazor NuGet package.

Step 1: Create a new ASP.NET Core Web application. Click Next.

asp.net core template

Step 2: Provide a project name and click Create.

asp.net core project configuration

Step 3: In the create a new ASP.NET Core Web application dialog.

  • Confirm that .NET Core and ASP.NET Core 3.0 is selected

  • Choose the Blazor (client-side) template and click Create

select framework

Step 4: Install the Syncfusion.Blazor from NuGet.org

select nuget

Note: Please ensure to check the Include prerelease option for our Beta release.

Step 5: Open ~/_Imports.razor file and import the Syncfusion.Blazor.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.PdfViewer

Step 6: Add the client-side style resources through CDN in the <head> element of the ~/wwwroot/index.html page.

<head>
    <link href="https://cdn.syncfusion.com/blazor/18.1.55/styles/bootstrap4.css" rel="stylesheet" />
</head>

For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.

<head>
    <link href="https://cdn.syncfusion.com/blazor/18.1.55/styles/bootstrap4.css" rel="stylesheet" />
    <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>

Step 7: Add SyncfusionBlazor service in Startup.cs file.

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

@using Syncfusion.Blazor

namespace BlazorApplication
{
    public class Startup
    {
        ....
        ....
        public void ConfigureServices(IServiceCollection services)
        {
            ....
            ....
            services.AddSyncfusionBlazor();
        }
    }
}

Note: To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by AddSyncfusionBlazor(true) and load the scripts in the HEAD element of the ~/Pages/_Host.cshtml page.

Step 8: Now, add the PDF Viewer (Client-side) component to the ~/Pages/Index.razor page.

<SfPdfViewer DocumentPath="PDF_Succinctly.pdf" ServiceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer" Height="500px" Width="1060px" ></SfPdfViewer>

Note: Since Syncfusion PDF Viewer (Blazor client-side) control depends on server-side processing to render the PDF files, it is mandatory to create a web service as mentioned here

Step 9:: Run the application, the PDF Viewer component will be rendered in the web browser as shown in the following screenshot.

output image