20 Dec 2013CPOL
Display PDF within web browser that support content type PDF using MVC3.
Mar 23, 2014 It earns the name 'in Action' by giving you the practical, hands-on guidance you'll need to confidently build the sites and applications you-and your clients-have been wanting for years.This book concentrates on new HTML5 features and assumes you are familiar with standard HTML.Purchase of the print book includes a free eBook in PDF, Kindle.
Introduction
I will demonstrate you different way to display PDF within browser using
MVC3
. Background
I have created
MVC3
empty project. I have added Controller
name Home
and created action
name Index
. I have added Index
view
for index action. I have added Temp.pdf
in my solution. Using the code
Method 1:- Display PDf by filePath. Let's create action name
DispalyPDF
in Home controller
as fellow and add view
for action
. That's it you can able to view PDF in browser.
I have use File function as my return type which return
FileResult
having overload File(filePaht,contentType)
.filePath
: Define the path of file. I have file in my root directory name Temp.pdf. I have define my file path as '/Temp.pdf'. contentType
: Define the type of file we are returning. If the content type is supported by browser browser will display that file.I have specified link in the Index view that will navigate to the action
DisplyaPDF()
.Method 2:- Display PDF by
fileContent.
Let's create action PDFDispaly()
as fellow and add view PDFDisplay
. I have use File function as return type having overload
File(fileContent,fileContentType)
fileContent
: define file content as the byte array. fileContentType
: define the type of file eg pdf, excel, text etc.. I have use
server.MapPath
method to get actual path of file on server by specifying virtual path as argument. I have created Helper
method name GetByetsFromFile
that will return fileContent
as byte array by accepting actual file path as argument. Method3:- Download PDF File Let's add another link that will provide to download Temp.pdf on ClientSide.
Let's create action name
PDFDownload
that will allow user to download PDF. I have use File function as my return type where overload accept the
fileContent
, contentType
and fileDownloadName
. fileDownloadName
: we just need to specify the file download name where MVC3 engine will do all the magic for us and download the file on client side with the specified name. Method4:- Display PDF File as PartialView. You can not specify the return type File as
PartialViewResult
. Let's use the HTML 5 tag embed in partialview to display pdf within browser and render the partial view inside div using AJax.ActionLink helper. Let's add another actionlink on Index View but this time we will add
ajax.actionlink()
. Let's create action method
PDFPartialView
inside Home controller that return partialviewresult
as fellow.Add view by checking create partial view check box. We have created partial view
<code>PDFPartialView
. Create embed html 5 tag inside the partial view. Specify src to the relative path of the PDF file as fellow.Click on the link 'View Temp pdf method3'. You will notice pdf loaded inside the div id pdfContainer.
Method5:- Display PDF as 64 bit string. This method only work with Chrome browser. We will follow following 3 step process.
Step 1 Convert PDF into the 64 bit array.
Step 2 Convert 64 bit array into 64 bit string.
Step3 Display 64 bit string as Src of the embed tag.
Note:- Do not forget to specify mime type as type.(e.g. 'image/png')
Let's create action PDFInCrome in Home controller as follow.
Let's add partial view
PDFInCrome
as follow. We are done with our action and view. Let's call our partial view on click of Ajax.ActionLink in our Index view.
This is end our simple demo of display PDF within web browser hope you enjoy.