opening a pdf file in modal possible?

Question

i was thinking of opening a pdf file in modal . current using

@Html.ActionLink("open file", "Download")

open another windows. i want it to populate it to a div so that i can view in in modal or overlay.

i am ok with jquery solution as well as currently my jquery return me some bytes character.

function openfile() {
    $.ajax({
        url: '@Url.Action("Download", "mycontroller")',
        type: "POST",
        dataType: "application/pdf",
        success: function (data) {
            $('#showpdf').html(data);
        },
        error: function (err) {
           alert(err)
        }
    });
}

Action in the controller:

public ActionResult Download()
{
    string path = HttpContext.Server.MapPath("/pdf/service_reports/SR26175.pdf");
    return File(path, "application/pdf");
}

so can i put a `` and put pdf inside a image and put that image in div? — MVC newbie, Apr 19 '17 at 06:34
lol - nope. You can transform your `PDF` into `IMG`, and IMG into `base64` data format, and then show inside ``. — , Apr 19 '17 at 06:36
You can make use of [`iframe`](https://www.w3schools.com/tags/tag_iframe.asp) for this purpose. — mmushtaq, Apr 19 '17 at 06:39

Alexander V. · Accepted Answer · 2017-04-19T09:29:40.570

4

Another way to do this is pass pdf path from json request and then use object inside the modal div:

<object id="myPdf" type="application/pdf" data="path/file.pdf"></object>

function openfile() {
    $.ajax({
        url: '@Url.Action("Download", "mycontroller")',
        type: "POST",
        dataType: "application/json",
        success: function (data) {
            $('#showpdf').html('<object id="myPdf" type="application/pdf" data="' + data.path +'"></object>');
        },
        error: function (err) {
            alert(err)
        }
    });
}

public ActionResult Download()
{
    string path = HttpContext.Server.MapPath("/pdf/service_reports/SR26175.pdf");
    return Json(new {path = path});
}

EDIT: For better user experience on different browsers that maybe doesn't support object tag, we could use object with embed tag as a fallback:

<object data="/path/file.pdf" type="application/pdf" width="700px" height="700px">
    <embed src="/path/file.pdf">
        This browser does not support PDFs. Please download the PDF to view it: <a href="/path/file.pdf">Download PDF</a>.</p>
    </embed>
</object>

edited Apr 19 '17 at 09:29

answered Apr 19 '17 at 06:46

Alexander V.

1,518
14
14

not working. ajax error return object object. I change the `dataType: "application/pdf",` to `dataType: "application/json",` and `public JsonResult Download()` also same error – MVC newbie Apr 19 '17 at 07:07
hardcoding works. But result same as iframe. mini size. `` – MVC newbie Apr 19 '17 at 07:12
what you mean, "mini size"? – Alexander V. Apr 19 '17 at 07:15
1

@MVCnewbie to change size you need to set – Alexander V. Apr 19 '17 at 07:25
you are right. i set the width and height of the modal. But i didnt set the – MVC newbie Apr 19 '17 at 07:32
@anete.anetes depends on browser, it should work in chrome and firefox but not sure about safari – Alexander V. Apr 19 '17 at 09:02
added note about fallback for browsers that doesn't support `object` tag – Alexander V. Apr 19 '17 at 09:11
how to use this if pdf file is not on server but in bytes as base64? – newdeveloper Apr 23 '19 at 02:49
@newdeveloper see https://stackoverflow.com/questions/40674532/how-to-display-base64-encoded-pdf maybe it would help – Alexander V. Apr 24 '19 at 07:00

score 1 · Answer 2 · answered Apr 19 '17 at 06:44

1

Assuming you have a controller named home. You can use an iframe like this

<div id='yourModel'>
   <iframe src="/Home/Download"></iframe>
</div>

and use jQuery to show / hide the div.

answered Apr 19 '17 at 06:44

Muhammad Bashir

97
8

simple and works. But the result not very nice. pdf too small to view. if no choice then i will adopt new window.thanks – MVC newbie Apr 19 '17 at 07:05
1

you can always use width and height to adjust the width and height of your iframe to meet your needs – Muhammad Bashir Apr 19 '17 at 07:20
yea.adjust as show in picture. the pdf is in the middle which is very small also. – MVC newbie Apr 19 '17 at 07:23
I have tried it and showing better result. try this – Muhammad Bashir Apr 19 '17 at 07:27
yes i also tried that. just now i increase my div and modal but not iframe thats why. thanks buddy – MVC newbie Apr 19 '17 at 07:43
it's a pleasure when it helps :) – Muhammad Bashir Apr 19 '17 at 07:44

score 0 · Answer 3 · answered Oct 31 '17 at 16:24

I've trying this but at the end I've made this becacuse I need to show diferent pdfs, that are stored (just the full path) in a DB and on a shared folder, then I have to show it one by one to the user, well hope it works for you!

on the view inner the modal body.

<div class="row" style="text-align: center;">
                <object id="pdfViewer" data="~/Evidence/PdfFile.pdf" type="application/pdf" width="790" height="500"></object>
                <div style="text-align: center;">
                    <label id="errorTxt"></label>
                </div>
            </div>

on the controller in a jsonresult.

            //HERE I GET THE REAL PATH OF THE FILE
            string evidence = _manager.GetEvidence(id);

            //CREATING THE NEW PATH FOR THE FILE
            var path = Path.Combine(Server.MapPath("~/Evidence/"), "PdfFile.pdf");

            //SAVE TEMPORARILY ON EVIDENCE FOLDER INNER THE PROYECT
            //WITH THE NEW NAME 
            System.IO.File.Copy(evidence, path, true);

            //AND JUST RETURN A JSON WITH A MESSAGE TO OPEN MODAL
            return Json("OK",JsonRequestBehavior.AllowGet);

and the js function with jquery

function ShowExistEvidence(id) {
    $.ajax({
        url: "@Url.Action("GetEvidence","ControllerName")",
        type: "POST",
        data: {
            id: id
        },
        success: function (data) {
            if (data === 'OK') {                    
                $("#modViewEvidencia").modal("show");
            } else {
               $("#errorTxt").text('File not found');
               $("#modViewEvidencia").modal("show");
            }

        }
    });
}

opening a pdf file in modal possible?

3 Answers3