Opening pdf file in modal mode?
I was thinking about opening a pdf file in modal mode. current using
@Html.ActionLink("open file", "Download")
open other windows. i want it to fill its div so i can view in modal or overlay.
I'm fine with a jquery solution, and currently my jquery is returning some byte character to me.
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");
}
source to share
Another way to do it is to loop through the pdf path from the json request and then use the 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 a better user experience in different browsers that may not support the tag object
, we could use object
with the tag embed
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>
source to share
I tried this, but in the end I did it because I need to show different PDFs that are stored (full path only) in the DB and in the shared folder, then I have to show this one from one to the user, well it works for you!
seemingly the inside of the 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 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");
}
}
});
}
source to share