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. Image for the cookie policy date
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 Web Forms |
Control: PdfViewer |
Published Date: August 21, 2018 |
Last Revised Date: June 6, 2019

PDF Viewer

PDF Viewer control supports viewing, reviewing, and printing PDF files in ASP.NET Web Forms applications. The hyperlink and table of contents support provides easy navigation within and outside the PDF files. The form-filling support provides a platform to fill, flatten, save, and print PDF files with AcroForm. PDF files can be reviewed with text markup annotation tools.

Load PDF document from database

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

HTML

<form id="form1" runat="server" >
    <div>
        <label>Enter the document name:</label>
        <input id="documentName" />
        <button id="load" onclick="loadDocument(event)" type="button">Load</button>
        <div class="content-container-fluid">
        <div class="row">
            <div class="cols-sample-area">
                    <div class="control">
                        <div id="pdfviewer">
                             <ej:pdfviewer id="pdfviewer1" Height="800"  ServiceUrl="/api/PdfViewer" runat="server">
                             </ej:pdfviewer>
                            </div>
                        </div>
                </div>
            </div>
            </div>
        </div>                                        
    </form>

JavaScript

function loadDocument(event) {
//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 = $("#pdfviewer1").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();
// Reads the PDF document data as byte array from the database
            byte[] byteArray = (byte[])read["Data"];
//converts byte array into base64 string
            return "data:application/pdf;base64," + Convert.ToBase64String(byteArray);
        }

Sample:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewerWeb_LoadFromDB-23672309

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.    

 

 

2X faster development

The ultimate ASP.NET Web Forms 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

Live Chat Icon For mobile