Articles in this section
Category / Section

How to load PDF document from database into PDF viewer

2 mins read

Loading PDF document from Database

PDF viewer supports to load the PDF document from database using the load() API. Refer to the following code.

HTML

<label>Enter the document name:</label>
<input id="documentName" />
<button id="load" onclick="loadDocument(event)" type="button">Load</button>
<div>   
    <div style="width:100%;height:950px;">
        @(Html.EJ().PdfViewer("pdfviewer").ServiceUrl("../../api/PdfViewer").PdfService(Syncfusion.JavaScript.PdfViewerEnums.PdfService.Local))
    </div>
</div>     

JS

function loadDocument() {
        //To send the provided file name to the web API controller.
        var documentName = $("#documentName").val();
        var jsonObject = new Object();
        if (documentName != "") {
            jsonObject['documentName'] = documentName;
            var jsonResult = JSON.stringify(jsonObject);
            $.ajax({
                type: "POST",
                url: '../api/PdfViewer/DocumentRetrieve',
                crossDomain: true,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                data: jsonResult,
                traditional: true,
                success: function (data) {
                    //returns the PDF document data as base 64 string
                    openDoc(data);
                }
            });
        }
 
    }
    function openDoc(data) {
        var obj = $("#pdfviewer").data("ejPdfViewer");
        //load the PDF document in PDF viewer
        obj.load(data);
    }

C#

public object DocumentRetrieve(Dictionary<string, string> jsonResult)
        {
            string documentID = jsonResult["documentName"];
            string constr = System.Configuration.ConfigurationManager.ConnectionStrings["PdfDocument"].ConnectionString;
            System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(constr);
            //searches for the PDF document from the Database
            var query = "select Data from PdfDocuments where DocumentName = '" + documentID + "'";
            System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(query);
            cmd.Connection = con;
            con.Open();
            System.Data.SqlClient.SqlDataReader read = cmd.ExecuteReader();
            read.Read();
            return "data:application/pdf;base64," + read["Data"];
        }

Sample https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_MVCsample-28436669

In the previously mentioned sample, input field will be available to provide the PDF document name and Load button is provided to load the required PDF document in PDF viewer.

Note:

Modify the web action methods in the API controller as per your entries in database. Also, modify the connection string of the database in the web.config file.   

 

Refer here to explore the rich set of PDF Viewer features. 

An online demo link to view PDF documents using Syncfusion PDF Viewer.

 

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied