How can I open a database-based PDF document in a PDF viewer?
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:
https://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.
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.
