Click here to Skip to main content
11,645,499 members (74,578 online)
Click here to Skip to main content

Tagged as

Display PDF within web browser using MVC3

, 20 Dec 2013 CPOL 31.2K 2.7K 6
Rate this:
Please Sign up or sign in to vote.
Display PDF within web browser that support content type PDF using MVC3.

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

        public FileResult DisplayPDF()
        {
            return File("/Temp.pdf", "application/pdf");
        }

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().

 <li>@Html.ActionLink("Viw Temp PDF Method1","DisplayPDF")</li> 

Method 2:- Display PDF by fileContent. Let's create action PDFDispaly() as fellow and add view PDFDisplay

        public FileResult PDFDisplay()
        {
            string filepath = Server.MapPath("/Temp.pdf");
            byte[] pdfByte = Helper.GetBytesFromFile(filepath);
            return File(pdfByte, "application/pdf");
        } 

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.

public static byte[] GetBytesFromFile(string fullFilePath)
        {
            // this method is limited to 2^32 byte files (4.2 GB)

            FileStream fs = null;
            try
            {
                fs = File.OpenRead(fullFilePath);
                byte[] bytes = new byte[fs.Length];
                fs.Read(bytes, 0, Convert.ToInt32(fs.Length));
                return bytes;
            }
            finally
            {
                if (fs != null)
                {
                    fs.Close();
                    fs.Dispose();
                }
            }

        }

Method3:- Download PDF File Let's add another link that will provide to download Temp.pdf on ClientSide.

<li>@Html.ActionLink("Download Temp PDF","PDFDownload")</li>

Let's create action name PDFDownload that will allow user to download PDF.

        public FileResult PDFDownload()
        {

            string filepath =Server.MapPath("/Temp.pdf");
            byte[] pdfByte = Helper.GetBytesFromFile(filepath);
            return File(pdfByte, "application/pdf", "demoform1");
        }

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().

<li>@Ajax.ActionLink("Viw Temp PDF Method4", "PDFPartialView", new AjaxOptions { UpdateTargetId = "pdfContainer" })</li> 

Let's create action method PDFPartialView inside Home controller that return partialviewresult as fellow.

        public PartialViewResult PDFPartialView()
        {
            return PartialView();
        }

Add view by checking create partial view check box. We have created partial view PDFPartialView. Create embed html 5 tag inside the partial view. Specify src to the relative path of the PDF file as fellow.

<h4>Partial View That display PDF....</h4><br /><embed src="/Temp.pdf" type="application/pdf"></embed> 

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.

        //only work in the crome 
        public PartialViewResult PDFInCrome()
        {
 
            string filepath = Server.MapPath("/Temp.pdf");
            byte[] pdfByte = Helper.GetBytesFromFile(filepath);
            var strBase64=Convert.ToBase64String(pdfByte);
            PDFCrome pdfCrome = new PDFCrome();
            pdfCrome.Content = string.Format("data:application/pdf;base64,{0}", strBase64);
            return PartialView(pdfCrome);
        } 

 Let's add partial view PDFInCrome as follow. 

 @model DisplayPDFDemo.Comman.PDFCrome

<embed src="@Model.Content" ></embed> 

We are done with our action and view. Let's call our partial view on click of Ajax.ActionLink in our Index view.

<li>@Ajax.ActionLink("Viw Temp PDF Method5", "PDFInCrome", new AjaxOptions { UpdateTargetId = "pdfContainer" })</li>  

 This is end our simple demo of display PDF within web browser hope you enjoy. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Amey K Bhatkar
Web Developer Lionbridge
India India
Amey K Bhatkar, a “Microsoft .Net” Web Developer.
I am programmer by will and profession.
I have completed my MCA in 2011 and join software industry.
Presently I am working with Lion Bridge Technologies in Mumbai - India

You may also be interested in...

Comments and Discussions

 
QuestionWorked Pin
kiran kanipakam2-Jan-15 10:31
memberkiran kanipakam2-Jan-15 10:31 
Questionhow to disable the pdf tool bar? Pin
Rameshkan20-Aug-14 4:59
memberRameshkan20-Aug-14 4:59 
GeneralMy vote of 1 Pin
VPSingh malhi28-Apr-14 2:56
memberVPSingh malhi28-Apr-14 2:56 
QuestionPDF does not display Pin
sid_amr13-Mar-14 3:57
membersid_amr13-Mar-14 3:57 
QuestionMessage Automatically Removed Pin
19-Feb-14 16:46
memberpittypan19-Feb-14 16:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150731.1 | Last Updated 20 Dec 2013
Article Copyright 2013 by Amey K Bhatkar
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid