Render JS PDF Viewer inside Blazor SfPdfViewer Component

17 Jul 20262 minutes to read

The Blazor SfPdfViewer component supports rendering the EJ2 JavaScript PDF Viewer inside a Blazor page using JavaScript interop.

The following steps show how to embed the JavaScript PDF Viewer in a Blazor component.

NOTE

Ensure that the EJ2 PDF Viewer scripts and styles are referenced in the application. The serviceUrl must point to a reachable EJ2 PDF Viewer web service endpoint.

Step 1: Add a JavaScript file to the application and reference it in the head element.

<head>
    <script src="sample.js" type="text/javascript"></script>
</head>

Step 2: Add the following code to the newly created JavaScript file to render the EJ2 PDF Viewer inside Blazor.

window.renderJsPdfViewer = (id) => {
    // Inject the required modules before creating the PdfViewer instance.
    ej.pdfviewer.PdfViewer.Inject(
        ej.pdfviewer.Toolbar, 
        ej.pdfviewer.Magnification,
        ej.pdfviewer.BookmarkView, 
        ej.pdfviewer.ThumbnailView, 
        ej.pdfviewer.TextSelection,
        ej.pdfviewer.TextSearch, 
        ej.pdfviewer.Print, 
        ej.pdfviewer.Navigation,
        ej.pdfviewer.LinkAnnotation, 
        ej.pdfviewer.Annotation,
        ej.pdfviewer.FormFields, 
        ej.pdfviewer.FormDesigner);

    // Render the PDF viewer control. The `id` argument must match the id of the target container element.
    var viewer = new ej.pdfviewer.PdfViewer({
        documentPath: "PDF_Succinctly.pdf",
        serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'
    });
    viewer.appendTo('#' + id);
};

Step 3: Add the following code to the Blazor component.

@inject IJSRuntime JS

<div id="pdfViewer" style="height:640px; width:100%;"></div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("renderJsPdfViewer", "pdfViewer");
        }
    }
}

NOTE

The PDF Viewer is rendered as a JavaScript component. Only the JavaScript PDF Viewer APIs are accessible; use JS interop to invoke them.

View Sample in GitHub

See also