Issue when loading PDF's in dialog

Question

We open PDF's in a Dialog, this works fine on a single PDF. When you close dialog and then select a different PDf to open it does not load. I get the following in Debug and have attached a video showing issue:

Uncaught TypeError TypeError: i.Init is not a function

at h.onmessage (https://localhost:7119/e03caeea-55ab-4c05-a35a-d187d4429bd3:1:3165)

--- Worker.postMessage ---

at e.pageRender (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:772124)

at e.requestSuccess (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:770577)

at e.loadSuccess (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:764230)

at e.loadSuccess (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:452931)

at <anonymous> (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:2040107)

at <anonymous> (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:2038720)

at <anonymous> (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:2038825)

at <anonymous> (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:2037760)

at yt (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:2037534)

at invokeMethod (C:\Users\martin.holmes\.nuget\packages\syncfusion.blazor.sfpdfviewer\26.1.38\staticwebassets\scripts\syncfusion-blazor-sfpdfviewer.min.js:9:2039878)

at <anonymous> (localhost꞉7119/_framework/blazor.server.js:1:3501)

at beginInvokeJSFromDotNet (localhost꞉7119/_framework/blazor.server.js:1:3475)

at <anonymous> (localhost꞉7119/_framework/blazor.server.js:1:72077)

at _invokeClientMethod (localhost꞉7119/_framework/blazor.server.js:1:72063)

at _processIncomingData (localhost꞉7119/_framework/blazor.server.js:1:70105)

at connection.onreceive (localhost꞉7119/_framework/blazor.server.js:1:64508)

at o.onmessage (localhost꞉7119/_framework/blazor.server.js:1:48842)

The code is as follows:

<Header> @pdfviewertitle </Header>

</SfPdfViewer2>

</Content>

</DialogTemplates>

</SfDialog>

public async void OnViewDocumentOpen(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args)

{

byte[] byteArray = System.IO.File.ReadAllBytes(DocumentPath);

string base64String = Convert.ToBase64String(byteArray);

await pdfviewer.LoadAsync("data:application/pdf;base64," + base64String, null);

}

Attachment: 20240620_114007_aaa5c2c4.zip

@pdfviewertitle

public async void OnViewDocumentOpen(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args) { byte[] byteArray = System.IO.File.ReadAllBytes(DocumentPath); string base64String = Convert.ToBase64String(byteArray); await pdfviewer.LoadAsync("data:application/pdf;base64," + base64String, null); }Attachment: 20240620_114007_aaa5c2c4.zip

Sathiyaseelan Kannigaraj · Answer

Hi Martin Holmes,We have investigated the issue and found that it was caused by loading the PDF document in the OnOpen event of the Dialog. Instead of loading the PDF in the OnOpen event, please load the PDF document in the Created event of the PDF Viewer. Below, we have provided a code snippet and sample for your reference.Code Snippet:

@headerText

public async void created() { byte[] byteArray = System.IO.File.ReadAllBytes(pdfPath); string base64String = Convert.ToBase64String(byteArray); await pdfviewer!.LoadAsync("data:application/pdf;base64," + base64String, null); } Additionally, in the demo, we observed that the toolbar does not rendered in the second time the PDF viewer is opened. This issue occurs because the toolbar items are not properly initialized. To resolve this, please include the initialization of the toolbar items when the dialog opens. Below, we have provided a sample and code snippet for your reference.Code Snippet:

@headerText

List pdfToolbarItems; public async Task Show(string filepath) { headerText = filepath; pdfToolbarItems = new List() { Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PageNavigationTool, Syncfusion.Blazor.SfPdfViewer.ToolbarItem.MagnificationTool, Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SelectionTool, Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PanTool, Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SearchOption, Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PrintOption, Syncfusion.Blazor.SfPdfViewer.ToolbarItem.DownloadOption }; await pdfDialog.ShowAsync(); } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfPdfViewer2Dotnet8Server1015452975.zip Regards,Sathiyaseelan K

Jay Jennings · Answer

I'm seeing the same issue and I am loading my PDF in PdfViewerEvents Created.

Using SF 25.1.38 and the app is Blazor WebAssembly.

<SfPdfViewer2 DocumentPath="@pdfDocumentPath"
                @ref="_pdfViewer"
                Height="700px"
                DownloadFileName="@downloadFileName"
                ZoomMode="ZoomMode.FitToWidth">
    <PdfViewerEvents Created="PdfViewerCreated"></PdfViewerEvents>
    <PdfViewerToolbarSettings ToolbarItems="toolbarItems"></PdfViewerToolbarSettings>
</SfPdfViewer2>


public async void PdfViewerCreated()
{
    await DisplayPDFDocument(currentDocumentId);
}
public async Task DisplayPDFDocument(int documentId)
{
    if (currentDocumentId > 0)
    {
        var controller = $"SomeController/GetDocument/{currentDocumentId}";
        var response = await ApiClient.Get<byte[]>(controller);

        if (response != null)
        {
            var len = response.Package.Length;

            pdfDocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(response.Package);
            downloadFileName = $"Court-{currentDocumentId}.pdf";
            await _pdfViewer.LoadAsync(pdfDocumentPath);
        }
        else
        {
            _message = "Failed to load the document.";
        }
    }
}

Any ideas?

Sathiyaseelan Kannigaraj · Answer

Hi Martin Holmes,Thank
you for the updates. We are currently reviewing the same scenario using the
Blazor WebAssembly sample to replicate the issue and will provide further
updates by November 4, 2024.Regards,Sathiyaseelan K

Sathiyaseelan Kannigaraj · Answer

Hi Martin Holmes,Thank you for your
patience. We have tested the same code with the WASM sample, but the issue did
not occur. Below, we have provided the sample we used for testing to replicate
the issue. Please review and compare this sample with your project to help resolve
the issue. If you continue to face any issues, kindly modify the provided
sample and share it with us so we can replicate the problem.Sample
with drop down Regards,Sathiyaseelan K