How to open ASP.NET Core PDF Viewer inside the dialog box?

Essential JS 2 PDF Viewer 

The Syncfusion PDF Viewer in ASP.NET Core PDF (Essential JS 2) is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It also available in other frameworks such as JavaScript, Angular, ASP.NET MVC, and React.

Refer to the following UG link for getting started with the PdfViewerControl.

https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started

Open PDF Viewer in Dialog Control

PDF viewer can be initialized and used inside
the Dialog control using the beforeOpen event.

Refer to the following UG link for getting started with Dialog control.

https://ej2.syncfusion.com/aspnetcore/documentation/dialog/getting-started

The following code will initialize the Dialog control and the dialog content.

HTML

<div id="target" style="display:block;height:600px">   
    <button onclick="onBeforeOpen();">Open PDF Viewer</button>
    <ejs-dialog id="dialog" height="600px" created="onCreated"  beforeOpen="onDialogBeforeOpen" visible="false" width="auto" isModal="true" target="#target" header="PDF Viewer" showCloseIcon="true"></ejs-dialog>
    <div id="dialog_content" style="display:none;border:1px solid #E0E0E0; width:100%;height:600px">
        <div id="pdfViewer" style="height:750px"></div>
    </div>
</div>

Refer to the following code to initialize the PdfViewerControl in the beforeOpen event of the Dialog control.

JavaScript

function onBeforeOpen(args) {
            var dialog = document.getElementById("dialog").ej2_instances[0];
             var filePath = "PDF Succinctly.pdf";
            dialog.show();
            if (pdfviewer) {
                //Load the document in PDF viewer
                pdfviewer.load(filePath, null);
            } else {
               //Intialize the PDF Viewer
                var viewer = new ej.pdfviewer.PdfViewer({
                    serviceUrl: '/api/PdfViewer',
                    documentPath: filePath,
                });
                ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation);
                viewer.appendTo('#pdfViewer');
                pdfviewer = document.getElementById("pdfViewer").ej2_instances[0];
            }            
        }     

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2PdfViewer_Core320690343

In the preceding sample, clicking the Open PDF Viewer button will open the PdfViewerControl inside the dialog box.

Conclusion

I hope you enjoyed learning about how to open ASP.NET Core PDF Viewer inside the dialog box.

You can refer to our ASP.NET Core PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!