How to display PDF in div for a particular id using MVC?

I am saving PDF files for Employee with HttpPostedFilebase where the path of the pdf will be saved in the database. Now I want to display the PDF in a div, not the download link. For showing image, I have done <img src=@Url.Content(Model.employee_image) />. How can I do the same for Displaying PDF?

Asked by:- SalmanZahir
: 15291 At:- 11/30/2017 9:02:32 AM mvc embed pdf in mvc view display-pdf-in-mvc-view

2 Answers
profileImage Answered by:- neena

First Method

As you have mentioned you have link/URL of the image and want to show something like that, so get the url of .pdf file in view and append it using <object> or <iframe> tag of HTML

Suppose you have Model.PdfURL saved in the database, then you can show it in view using code below

<iframe src="" width="200" height="200" type='application/pdf'>

For example, I have the pdf link as

Then looking at the above HTML, my code would be

<iframe src="" width="200" height="200" type='application/pdf'>

Note: if your website has HTTP(not secured URL) use HTTP for also

Working fiddle here

Second approach

You can use external library

Third approach

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.

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

Let's create action method PDFPartialView inside  Home controller that returns PartialViewResult as below.

public PartialViewResult PDFPartialView()
    //if you don't have url get the url from database here by passing id in the ActionMethod
// and pass it in Partial View using ViewBag
    return PartialView();

Add view by selecting it as partial view. 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 below.

<h3>Partial for display PDF</h3><br />
<embed src="/PDFURL.pdf" type="application/pdf"></embed> 
<!--Or you can use iframe also-->

At:- 11/30/2017 10:58:06 AM Updated at:- 1/11/2018 2:55:57 PM

profileImage Answered by:- bhanu

If the above answer doesn’t work for you, here are the few links with same approach of <embed> tag, but explained in detail

Second link which has 4 alternatives for your issue

At:- 12/1/2017 12:36:02 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use