Search results

Load the PDF documents dynamically in ASP.NET MVC PDF Viewer control

28 Jan 2022 / 2 minutes to read

The PDF Viewer server library allows to switch or load the PDF documents dynamically after the initial load operation. To achieve this, load the PDF document as a base64 string or file name in PDF Viewer control using the Load() method dynamically.

The following steps are used to load the PDF document dynamically.

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: Use the following code snippet to load PDF document using base64 string.

Copied to clipboard
<button type="button" onclick="load1()">LoadDocumentFromBase64</button>
<script>
    // Load a Base64 String
function load1() {
    // Sending Ajax request to the controller to get base 64 string
    $.ajax({
        url: '/PdfViewer/GetDocument',
        type: 'POST',
        cache: false,
        processData: false,
        contentType: false,
        success: function (data) {
            debugger;
            var viewer = document.getElementById('pdfViewer').ej2_instances[0];
            viewer.load(data, null);
        },
        error: function (msg, textStatus, errorThrown) {
            debugger;
            alert('Exception' + msg.responseText);
        }
    });
}
</script>

Step 3: Add the following code snippet in PdfViewerController.cs file to get the base64 string of the given document.

Copied to clipboard
 public ActionResult GetDocument()
{
    var docBytes = System.IO.File.ReadAllBytes(GetDocumentPath("PDF_Succinctly.pdf"));
    string docBase64 = "data:application/pdf;base64," + Convert.ToBase64String(docBytes);
    return Content(docBase64);
}

Step 4: Use the following code snippet to load PDF document using document name.

Copied to clipboard
<button type="button" onclick="load2()">LoadDocumentFromBase64</button>
<script>
// load document using document name.
function load2() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    viewer.load("HTTP Succinctly.pdf", null)
}
</script>

T> Also can add the base64 string directly in the DocumentPath() method.

Download the sample, how to load PDF documents dynamically