Hi RichardSa,
Refer below modified code.
HTML
Home
<asp:GridView ID="gvFiles" runat="server" AutoGenerateColumns="false" DataKeyNames="id"
OnRowDataBound="OnRowDataBound" OnSelectedIndexChanged="OnSelectedIndexChanged">
<Columns>
<asp:BoundField DataField="id" HeaderText="Id" />
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Default
<div class="wrapper">
<div id="content" style="font-size: 10pt; width: 100%;">
<div class="container" id="centered" style="margin: 0 auto; padding: 5px; font-family: Nunito;">
<div class="form-horizontal">
<h1 style="font-size: small; margin: 0 auto; color: red;">Document Details</h1>
<hr />
<div id="pdf_container"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf_viewer.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default.aspx/GetFile",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
LoadPdfFromBlob(r.d.Data);
},
error: function (r) {
alert(r.responseText);
}
});
});
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
var pdfDoc = null;
var scale = 1; //Set Scale for zooming PDF.
var resolution = 1; //Set Resolution to Adjust PDF clarity.
function LoadPdfFromBlob(blob) {
//Read PDF from BLOB.
pdfjsLib.getDocument({ data: blob }).promise.then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
//Reference the Container DIV.
var pdf_container = document.getElementById("pdf_container");
pdf_container.innerHTML = "";
pdf_container.style.display = "block";
//Loop and render all pages.
for (var i = 1; i <= pdfDoc.numPages; i++) {
RenderPage(pdf_container, i);
}
});
};
function RenderPage(pdf_container, num) {
pdfDoc.getPage(num).then(function (page) {
//Create Canvas element and append to the Container DIV.
var canvas = document.createElement('canvas');
canvas.id = 'pdf-' + num;
ctx = canvas.getContext('2d');
pdf_container.appendChild(canvas);
//Create and add empty DIV to add SPACE between pages.
var spacer = document.createElement("div");
spacer.style.height = "20px";
pdf_container.appendChild(spacer);
//Set the Canvas dimensions using ViewPort and Scale.
var viewport = page.getViewport({ scale: scale });
canvas.height = resolution * viewport.height;
canvas.width = resolution * viewport.width;
//Render the PDF page.
var renderContext = {
canvasContext: ctx,
viewport: viewport,
transform: [resolution, 0, 0, resolution, 0, 0]
};
page.render(renderContext);
});
};
</script>
Code
Home
using System.Data.SqlClient;
using System.Configuration;
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gvFiles, "Select$" + e.Row.RowIndex);
e.Row.Style.Add("cursor", "pointer");
e.Row.ToolTip = "Click to view this document.";
}
}
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
foreach (GridViewRow row in gvFiles.Rows)
{
if (row.RowIndex == gvFiles.SelectedIndex)
{
int index = gvFiles.SelectedIndex;
Session["RowIndex"] = gvFiles.DataKeys[index].Value.ToString();
Response.Redirect("Home.aspx");
}
}
}
private void BindGrid()
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand("SELECT id, Name FROM tblFiles", con))
{
con.Open();
gvFiles.DataSource = cmd.ExecuteReader();
gvFiles.DataBind();
con.Close();
}
}
}
Default
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
[WebMethod(EnableSession = true)]
public static object GetFile()
{
string fileName = String.Empty;
byte[] bytes = null;
string type = string.Empty;
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM tblFiles WHERE Id = @Id", con))
{
cmd.Parameters.AddWithValue("@Id", HttpContext.Current.Session["RowIndex"]);
con.Open();
using (SqlDataReader dr = cmd.ExecuteReader())
{
if (dr.Read())
{
fileName = dr["Name"].ToString();
bytes = (byte[])dr["Data"];
type = dr["ContentType"].ToString();
}
}
con.Close();
}
}
return new { Name = fileName, Data = bytes, ContentType = type };
}
Also you need to set theMaximum JSON Length as described in the article.
