We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load PDF document from database into PDF viewer

Platform: ASP.NET MVC |
Control: PdfViewer |
Published Date: August 31, 2018 |
Last Revised Date: April 8, 2019

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 http://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.

 

 

 

 

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon