1. Home
  2. Forum
  3. Blazor
  4. PdfViewerServer in Dialog

PdfViewerServer in Dialog

I am trying to create a component that shows a Dialog with a PdfViewer inside, based on the byte array passed in a method.
The code for the component can be found below.
For sake of the example, I am passing the byte array value inside.

When displaying the component, it only displays a very small image of the PDF when clicked the first time.
All next button clicks do not display anything.

I hope you can help me to solve this.

Thanks!


------- PdfViewer.razor - Begin ------

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.PdfViewerServer

<SfDialog @ref="dialog" Width="75%" Height="100%" ShowCloseIcon="true" IsModal="true" Visible="false" Header="@Title">
    <DialogEvents OnOpen="OnDialogOpen" OnClose="OnDialogClose" />
    <SfPdfViewerServer @ref="pdfViewer" Height="100%" Width="100%" />
</SfDialog>

@code {
    #region Variables

    private SfDialog dialog;
    private SfPdfViewerServer pdfViewer;
    private string DocumentPath { get => (File == null) ? null : "data:application/pdf;base64," + Convert.ToBase64String(File); }
    private bool initialVisible = false;

    #endregion

    #region Parameters

    [Parameter] public string Title { get; set; }
    [Parameter] public byte[] File { get; set; }

    #endregion

    #region Events

    public async Task OnDialogOpen(BeforeOpenEventArgs args)
    {
        await pdfViewer.Load(DocumentPath, null);
    }

    public async Task OnDialogClose(BeforeCloseEventArgs args)
    {
        await pdfViewer.Unload();
    }

    #endregion

    #region Methods

    public async Task Show(byte[] file, string fileName)
    {
        if (fileName != null)
            Title = fileName;

        if (file != null)
            File = file;

        initialVisible = true;

        StateHasChanged();

        await InvokeAsync(async () =>
            await dialog.Show()
        );
    }

    public async Task Hide()
    {
        await pdfViewer.Unload();
        await dialog.Hide();
    }

    #endregion

}


------- PdfViewer.razor - End ------


------- Index.razor - Begin ------

@using Syncfusion.Blazor.Buttons
@page "/"

<SfButton OnClick="async () => await OnButtonClick(1)" CssClass="m-2">PDF 1</SfButton>
<br />
<SfButton OnClick="async () => await OnButtonClick(2)" CssClass="m-2">PDF 2</SfButton>
<br />
<SfButton OnClick="async () => await OnButtonClick(3)" CssClass="m-2">PDF 3</SfButton>

@if (pdfFilePath != null)
{
    <PdfViewer @ref="pdfViewer" />
}

@code
{
    private PdfViewer pdfViewer;
    string pdfFilePath = "";
    byte[] bytes;

    private async Task OnButtonClick(int id)
    {
        byte[] file = null;
        string fileName = null;

        {
            /* This code below replaces the async function to fetch the correct PDF */
            await Task.Delay(0);
             switch (id)
            {
                case 1:
                    fileName = "File 1.pdf";
                    file = Convert.FromBase64String("JVBERi0xLjMNCiWTjIueIFJlcG9ydExhYiBHZW5lcmF0ZWQgUERGIGRvY3VtZW50IGh0dHA6Ly93d3cucmVwb3J0bGFiLmNvbQ0KMSAwIG9iag0KPDwgL0YxIDIgMCBSIC9GMiAzIDAgUiA+Pg0KZW5kb2JqDQoyIDAgb2JqDQo8PCAvQmFzZUZvbnQgL0hlbHZldGljYSAvRW5jb2RpbmcgL1dpbkFuc2lFbmNvZGluZyAvTmFtZSAvRjEgL1N1YnR5cGUgL1R5cGUxIC9UeXBlIC9Gb250ID4+DQplbmRvYmoNCjMgMCBvYmoNCjw8IC9CYXNlRm9udCAvVGltZXMtQm9sZCAvRW5jb2RpbmcgL1dpbkFuc2lFbmNvZGluZyAvTmFtZSAvRjIgL1N1YnR5cGUgL1R5cGUxIC9UeXBlIC9Gb250ID4+DQplbmRvYmoNCjQgMCBvYmoNCjw8IC9Db250ZW50cyA4IDAgUiAvTWVkaWFCb3ggWyAwIDAgNjEyIDc5MiBdIC9QYXJlbnQgNyAwIFIgL1Jlc291cmNlcyA8PCAvRm9udCAxIDAgUiAvUHJvY1NldCBbIC9QREYgL1RleHQgL0ltYWdlQiAvSW1hZ2VDIC9JbWFnZUkgXSA+PiAvUm90YXRlIDAgL1RyYW5zIDw8ICA+PiANCiAgL1R5cGUgL1BhZ2UgPj4NCmVuZG9iag0KNSAwIG9iag0KPDwgL091dGxpbmVzIDkgMCBSIC9QYWdlTW9kZSAvVXNlTm9uZSAvUGFnZXMgNyAwIFIgL1R5cGUgL0NhdGFsb2cgPj4NCmVuZG9iag0KNiAwIG9iag0KPDwgL0F1dGhvciAoYW5vbnltb3VzKSAvQ3JlYXRpb25EYXRlIChEOjIwMjAwOTAyMTMwNTIzKzA2JzAwJykgL0NyZWF0b3IgKFJlcG9ydExhYiBQREYgTGlicmFyeSAtIHd3dy5yZXBvcnRsYWIuY29tKSAvS2V5d29yZHMgKCkgL01vZERhdGUgKEQ6MjAyMDA5MDIxMzA1MjMrMDYnMDAnKSAvUHJvZHVjZXIgKFJlcG9ydExhYiBQREYgTGlicmFyeSAtIHd3dy5yZXBvcnRsYWIuY29tKSANCiAgL1N1YmplY3QgKHVuc3BlY2lmaWVkKSAvVGl0bGUgKHVudGl0bGVkKSAvVHJhcHBlZCAvRmFsc2UgPj4NCmVuZG9iag0KNyAwIG9iag0KPDwgL0NvdW50IDEgL0tpZHMgWyA0IDAgUiBdIC9UeXBlIC9QYWdlcyA+Pg0KZW5kb2JqDQo4IDAgb2JqDQo8PCAvRmlsdGVyIFsgL0FTQ0lJODVEZWNvZGUgL0ZsYXRlRGVjb2RlIF0gL0xlbmd0aCA2NTUgPj4NCnN0cmVhbQ0KR2FzSlE6Sl4iKSZCNCsncUFrOzBYQik8NUQhK1RULmZrdSpAUlsqK0UrLkxjL1tUNHApSEduSmoyQTRfWWFKSVUuYSoqVWsyaHFMSmZyOEpTLF5HQ2koIjlgKVslRy09K0RidU9UMSIiSG9jUEI6KSJcR1A3aEM3WXRBRjQzakdecDRTOD9sIV8nX1xoUDQkNFdFNjJMRi5SNCM2ZigyZUtBKWFZUSQ3Qjg8OiFsX1djXG43PTFvTzlWMWEmTGNCV1dVMT9hbW1LRkNDbi4tK2MmbmdwX0wrWyQ1bzlTNUc6bD1fU0E2ZzZsUUg1YkdgZCU2ITNfMV8jZD9xM1IzaU02LGBSW0c8QTxSMilNOzxoYzU+ZWtOcy4nKilQT1s2Xjg5PWZgUSJuSFM9PEBTO1QpNUZMRlsnSF1yOzxfOFs7Q2IoJ0tMciwqTihXZVktIVlbJzxTVDBAKTYyXWQ+XCRpTDRCSlQzVUpSTT0sTFBZSkVWKXNtKTM5RVNpTFBrPDc/WEAlSF0jLFxPYypldTN1JXVlcEghPWtEKnAkYSQ4R00iaVMuUiEydFhkZSozTFYoV0dyRTY0SW5KTTJPNzldJTtkWW9pZjhjXWVgJXBtU2xlKnJKMU9acUVFbUBfVGdBWT1oYVJRcF5WWkJvRG08OCFwQT0uOEBvSmMuYTMyKShcWldCdUBDXV5IZXIrOWEzNU5BLV9uKDQiJlNeY1tvZCpBXiJlLiwiLCxVOTNSYlNaaUA3aDgtcGlEJiVMVm5SKVJpUlIxQlhdWTtwWGA/TkdhYzxJYk0/cTtdK1RRM2ZnRSJMMF1mWE9QXUpUdTxeP2UpbiskYWViRXEmTCwpY1RQYVg6dSZSayt+PmVuZHN0cmVhbQ0KZW5kb2JqDQo5IDAgb2JqDQo8PCAvQ291bnQgMCAvVHlwZSAvT3V0bGluZXMgPj4NCmVuZG9iag0KeHJlZg0KMCAxMA0KMDAwMDAwMDAwMCA2NTUzNSBmDQowMDAwMDAwMDc1IDAwMDAwIG4NCjAwMDAwMDAxMTkgMDAwMDAgbg0KMDAwMDAwMDIyOSAwMDAwMCBuDQowMDAwMDAwMzQwIDAwMDAwIG4NCjAwMDAwMDA1MzcgMDAwMDAgbg0KMDAwMDAwMDYyNCAwMDAwMCBuDQowMDAwMDAwOTI0IDAwMDAwIG4NCjAwMDAwMDA5ODYgMDAwMDAgbg0KMDAwMDAwMTczNiAwMDAwMCBuDQp0cmFpbGVyDQo8PCAvSUQgDQogJSBSZXBvcnRMYWIgZ2VuZXJhdGVkIFBERiBkb2N1bWVudCAtLSBkaWdlc3QgKGh0dHA6Ly93d3cucmVwb3J0bGFiLmNvbSkNCiBbKFwzMjNcMjIzXDIyM0tcMjM1dVwzNTRWXDAxMFRcMjEyXDM3N1wzNzRyfiwpIChcMzIzXDIyM1wyMjNLXDIzNXVcMzU0VlwwMTBUXDIxMlwzNzdcMzc0cn4sKV0NCiAvSW5mbyA2IDAgUiAvUm9vdCA1IDAgUiAvU2l6ZSAxMCA+Pg0Kc3RhcnR4cmVmDQoxNzg1DQolJUVPRg0K");
                    break;
                default:
                    file = Array.Empty<byte>();
                    fileName = null;
                    break;
            }
        }
        /* End of async function code */

        StateHasChanged();

        await InvokeAsync(async () => 
        {
            if (fileName != null && file != null)
                await pdfViewer.Show(file, fileName);
        });

    }
}

------- Index.razor - End ------




4 Replies 1 reply marked as answer
AA Akshaya Arivoli Syncfusion Team September 3, 2020 11:18 AM UTC

Hi Michael,    
   
Thank you for contacting Syncfusion support.  

We were unable to reproduce the issue with the provided details. We have shared the sample in which we have tried to reproduce the issue in the below link,  


Please try it and revert us with more details about your issue, modified sample and replication procedure, if you still need further assistance. These details will be helpful for us to investigate further and assist you better.  



 
Regards,   
Akshaya    


MI Michael September 3, 2020 12:11 PM UTC

The sample you had sent was indeed working.
I have created the component separately, and have now agan the same issue.

Please find in attachment the project I have altered.


Best regards,

Mike


Attachment: PdfViewer_Blazor_Server_d6ab2e3f.zip

AA Akshaya Arivoli Syncfusion Team September 4, 2020 11:12 AM UTC

Hi Michael,  

Thank you for your update.   

We were able to reproduce the reported issue with the provided sample, we will analyze further on it and update you with more details on September 9, 2020  

Regards,  
Akshaya   


AA Akshaya Arivoli Syncfusion Team September 8, 2020 02:22 PM UTC

Hi Michael, 
 
The width and height is applied in percentage for the dialog and the PDF Viewer control. So the issue occurs. If we provide the width and height in percentage then all the parent element has to provide in percentage. However we can resolve the reported issue by providing the values in pixels. We have also modified the provided sample. 
 
<SfDialog @ref="dialog" Width="1060px" ShowCloseIcon="true" IsModal="true" Visible="false" Header="@Title"> 
            <DialogEvents OnOpen="OnDialogOpen" OnClose="OnDialogClose" /> 
            <SfPdfViewerServer @ref="pdfViewer" Height="500px"/> 
        </SfDialog> 
 

Regards, 
Akshaya  



Marked as answer
Loader.
Up arrow icon