Instantiate the PDF Viewer component dynamically

6 Dec 20242 minutes to read

To instantiate a PDF Viewer component dynamically and load PDF documents in Syncfusion^® PDF Viewer, use the following steps:

In your HTML file, create a div element that will act as a container for the PDF Viewer component, and use the jQuery $.ajax method to make an AJAX request to your server and retrieve a PDF document. Once the document is retrieved, use the PDF Viewer API to load the document into the PDF Viewer component.

Use the serviceUrl property of the PDF Viewer instance to set the URL of a PDF document you want to load.

<div style="width:100%;height:600px">
    <button id="loadPDF Viewer">Load PDF Viewer</button>
    <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
</div>

<script>
    document.getElementById("loadPDF Viewer").addEventListener('click', function () {
        $.ajax({
            url: 'https://localhost:44327/pdfviewer/GetPdfDocument',
            type: "GET",
            success: function (data) {
                var viewer = new ej.pdfviewer.PdfViewer({
                    serviceUrl: "https://localhost:44327/pdfviewer",
                    documentPath: data,
                });
                viewer.appendTo("#pdfViewer");
            }
        });
    });
</script>

In your controller, create an action method that returns a PDF document as an action result.

View Sample in GitHub.