How to open PDF Viewer in new window

2 mins read

Essential JS 2 PDF Viewer

The Syncfusion PDF Viewer in ASP.NET MVC (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 is also available in other frameworks such as JavaScript Angular and React.

Refer to the following UG link for getting started with the PDF Viewer.

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

Open PDF Viewer in new window

You can initialize the PDF Viewer in new window by using window.open(). Refer to the following steps to open the PDF Viewer in new Window:

Step 1:

Create a button and send the Ajax request on the button click to get the PDF document from the server-side using the PDF document name.

<button onclick="LoadPdf();">Load PDF </button>

Step 2:

Send AJAX request to server-side with the PDF document name and return the PDF document data as base64 string on success of the AJAX request.

Initialize the PDF Viewer on success of the AJAX request by assigning the PDF document’s base64 string to the documentPath API.

function LoadPdf() {
         //Sending Ajax request to the controller to get base 64 string
         var jsonData = new Object();
         jsonData["documentName"] = "HTTP Succinctly.pdf";
        $.ajax({
            url: '/PdfViewer/GetDocument',
            type: 'POST',
            dataType: 'text',
            crossDomain: true,
            traditional: true,
            contentType: 'application/json; charset=utf-8',
            data:JSON.stringify(jsonData),       
            success: function (data) {
        //Open Window in new tab
                 var ws = window.open("", '_blank', "width=800,height=600,location=no,menubar=no,status=no,titilebar=no,resizable=no")
                //Adding script and CSS files
                ws.document.write('<!DOCTYPE html><html><head><title>PdfViewer</title><link href = "https://cdn.syncfusion.com/ej2/17.2.46/material.css" rel = "stylesheet"><script src="https://cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js"><\/script><script src="https://cdn.syncfusion.com/ej2/17.2.46/dist/ej2.min.js"><\/script><\/head><body>');
                //Div to render PDF Viewer
                ws.document.write('<div style="width:100%;min-height:570px"><div id="PdfViewer"></div><\/div>')
                //Initializes the PDF Viewer
                ws.document.write("<script> var pdfviewer = new ej.pdfviewer.PdfViewer({documentPath:'" + data + "',serviceUrl: '/pdfviewer'});pdfviewer.appendTo('#PdfViewer');<\/script>")
                ws.document.write('<\/body><\/html>');
                ws.document.close();                  
                       },
            error: function (msg, textStatus, errorThrown) {
                alert('Exception' + msg.responseText);
            }
        });
        }

Step 3:

Refer to the following code to get the PDF document data and return it as base 64 string to the client.

public Object GetDocument(jsonObjects jsonObject)
        {
            var jsonData = JsonConverter(jsonObject);
            byte[] docBytes = System.IO.File.ReadAllBytes(GetDocumentPath(jsonData["documentName"]));
            var docBase64 = "data:application/pdf;base64," + Convert.ToBase64String(docBytes);
           return (docBase64);
           
        }

Sample link:

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

In the previously given sample, clicking the ‘Load PDF’ button will send the Ajax request with the PDF document name to the controller and the PDF document data is returned as base64 string to the client. On the success of the Ajax request we have created the PDF Viewer and loaded that base64 string in it.

Did you find this information helpful?

Yes

Comments (0)