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.