Hi indradeo,
I have refer below article link to make the sample.
Please refer below sample.
HTML
Home Page
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded" Height="146px" Width="320px">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" Text="View File" CommandArgument='<%# Eval("Text") %>' runat="server" OnClick="ViewFile"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
Default Page
<%= DateTime.Now.ToString("dd/MM/yyyy")%>
<hr />
<div id="pdf_container"></div>
<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">
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.
window.onload = LoadPdfFromUrl();
function LoadPdfFromUrl() {
var url = "Report/" + location.search.split('=')[1];
//Read PDF from URL.
pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
//Reference the Container DIV.
var pdf_container = document.getElementById("pdf_container");
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>
Namespace
using System.IO;
Code
Home Page
protected void Page_Load(object sender, EventArgs e)
{
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Report/"));
List<ListItem> files = new List<ListItem>();
foreach (string filePath in filePaths)
{
files.Add(new ListItem(Path.GetFileName(filePath), filePath));
}
GridView1.DataSource = files;
GridView1.DataBind();
}
protected void ViewFile(object sender, EventArgs e)
{
string url = string.Format("Default.aspx?FN={0}", (sender as LinkButton).CommandArgument);
string script = "<script type='text/javascript'>window.open('" + url + "')</script>";
this.ClientScript.RegisterStartupScript(this.GetType(), "script", script);
}
Screenshot