issues in pdf viewer loading

[jose KJ]

i am implementing a poc, basically i will have a grid with some drug names which is actually taken from multiple files, on clicking view in pdf button i will pass a drug name and pdf name and i need to view it in pdf..... for this i implemented a basic setup where i have multiple buttons on clicking those i am excepting it to load repective pages in diffrent pdfs, also i am excepting it to perform search. but sometime it works but sometime its not working, sometime it take time to show the search result.


TLDR: facing issues like delay or not showing the searched text, delay on not loading correct page

@page "/counter"

@using Syncfusion.Blazor

@using Syncfusion.Blazor.SfPdfViewer

@using System.IO

@using Azure.Storage.Blobs

@using Azure.Storage.Blobs.Specialized

@inject IJSRuntime JS

<div style="display: flex; height: 100vh;">

    <!-- Sidebar with Buttons -->

    <div style="width: 20%; padding: 10px; background-color: #f8f9fa;">

        @foreach (var button in pdfButtons)

        {

            <button class="btn [email protected] w-100 mb-2" @onclick="() => HandleButtonClick(button)">@button.Label</button>

        }

        <!-- Search Input -->

        <input type="text" class="form-control mb-2" @bind="searchInput" placeholder="Enter text to search" />

        <button class="btn btn-info w-100" @onclick="SearchInPDF">Search</button>

        <!-- Loading Indicator -->

        @if (isLoading)

        {

            <div class="spinner-border text-primary mt-2" role="status">

                <span class="visually-hidden">Loading...</span>

            </div>

        }

    </div>

    <!-- PDF Viewer -->

    <div style="width: 80%; border-left: 2px solid #ccc;">

        <SfPdfViewer2 DocumentPath="@DocumentPath" Height="100%" Width="100%" @ref="@pdfViewer">

            <PdfViewerEvents DocumentLoaded="DocumentLoaded"></PdfViewerEvents>

        </SfPdfViewer2>

    </div>

</div>

@code {

    private SfPdfViewer2 pdfViewer;

    private string pdf1 = "https://sonderhealthplans.com/wp-content/uploads/2024/10/CY2025-Formulary_Sonder-MAPD_5T_01_05_10_14_15_16_17_01012025-v8.2.pdf";

    private string pdf2 = "https://sonderhealthplans.com/wp-content/uploads/2024/04/37_CY-2023-Formulary-Comprehensive-Sonder-C-SNP-003-004_122023.pdf";

    public string DocumentPath { get; set; } // = "https://sonderhealthplans.com/wp-content/uploads/2024/10/CY2025-Formulary_Sonder-MAPD_5T_01_05_10_14_15_16_17_01012025-v8.2.pdf";

    private string searchText = "";

    private string searchInput = "";

    private bool isLoading = false;

    private int pageNumber = 0;

    private List<PdfButton> pdfButtons = new()

    {

        new PdfButton { Label = "Open Page 10 (PDF 1)", PdfUrl = "pdf1", PageNumber = 10, Color = "primary" },

        new PdfButton { Label = "Open Page 12 (PDF 1)", PdfUrl = "pdf1", PageNumber = 12, Color = "secondary" },

        new PdfButton { Label = "Open Page 10 (PDF 2)", PdfUrl = "pdf2", PageNumber = 10, Color = "success" },

        new PdfButton { Label = "Search Danazol", PdfUrl = "pdf1", SearchText = "danazol oral capsule 100 mg, 200 mg, 50 mg", Color = "success" }

    };

    private async Task HandleButtonClick(PdfButton button)

    {

        var newDocumentPath = button.PdfUrl == "pdf1" ? pdf1 : pdf2;

        searchText = button.SearchText ?? "";

        pageNumber = 0;

        if(newDocumentPath == DocumentPath){

            DocumentPath = newDocumentPath;

            if (!string.IsNullOrWhiteSpace(searchText))

            {

                pdfViewer.SearchTextAsync(searchText, false);

            }

            if (pageNumber != 0)

            {

                pdfViewer.GoToPageAsync(pageNumber);

            }

        }else{

            DocumentPath = newDocumentPath;

        }

    }

    private void DocumentLoaded(LoadEventArgs args)

    {

        if (!string.IsNullOrWhiteSpace(searchText))

        {

            pdfViewer.SearchTextAsync(searchText, false);

        }

        if(pageNumber != 0){

            pdfViewer.GoToPageAsync(pageNumber);

        }

    }

    private async Task SearchInPDF()

    {

        if (!string.IsNullOrWhiteSpace(searchInput))

        {

            isLoading = true;

            StateHasChanged();

            DocumentPath = pdf1;

            await pdfViewer.SearchTextAsync(searchInput, false);

            isLoading = false;

            StateHasChanged();

        }

    }

    private class PdfButton

    {

        public string Label { get; set; }

        public string PdfUrl { get; set; }

        public int? PageNumber { get; set; }

        public string SearchText { get; set; }

        public string Color { get; set; }

    }

}

[Sathiyaseelan Kannigaraj]

Hi Jose KJ,

Thank you for reaching out to us. We have reviewed the code you provided and confirmed that PDF loading functions correctly without any issues. However, we did notice a delay in the search functionality due to the search text being located on pages beyond page 90. Extracting the text takes time, affecting the search performance. We will analyze this further and provide an update on 12th February 2025.

Below, we have included the tested sample. Please review it and confirm if you encountered any loading issues. If you are still facing any loading problems, kindly provide a demo video of the issue so we can replicate it and offer an appropriate solution.

Sample we have tested 

Regards,
Sathiyaseelan K

[Sathiyaseelan Kannigaraj]

Hi Jose KJ,

We have logged it as a feature request "Text search performance improvements using PDFIUM". This feature will be included in one of the upcoming releases. This is because we have planned various features and improvements in our roadmap. We will inform you once this feature is implemented. You can track the status of the feature from the following feedback link.

Feature Feedback: Text search performance improvements using PDFIUM | Feature Feedback  

Regards,
Sathiyaseelan K