Load PDF documents dynamically

31 Oct 20234 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.

<button type="button" onclick="load1()">LoadDocumentFromBase64</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script type ="text/javascript">

    // Load a Base64 String
    function load1() {
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
       
    }
</script>
<button type="button" onclick="load1()">LoadDocumentFromBase64</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl='/Index'
                   documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script type ="text/javascript">

    // Load a Base64 String
    function load1() {
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.load("data:application/pdf;base64," + addBase64String, null);
       
    }

</script>

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

<button type="button" onclick="load2()">LoadDocument</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script type ="text/javascript">

    // load document using file path.
    function load2() {
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.load("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf",null)
    }
</script>
<button type="button" onclick="load2()">LoadDocument</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl='/Index'
                   documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script type ="text/javascript">

    // load document using file path.
    function load2() {
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.load("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf",null)
    }
</script>

View sample in GitHub