以模态打开pdf文件可能吗?

时间:2017-04-19 06:22:52

标签: javascript jquery asp.net-mvc

我正在考虑以模态打开pdf文件。当前使用

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

打开另一个窗口。我希望它将它填充到div中,以便我可以以模态或叠加方式查看。

我对jquery解决方案没问题,而且目前我的jquery还给我一些字节字符。

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

控制器中的动作:

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

3 个答案:

答案 0 :(得分:4)

另一种方法是从json请求传递pdf路径,然后在模态div中使用object:

<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});
}

修改 为了在可能不支持object代码的不同浏览器上获得更好的用户体验,我们可以使用带有object代码的embed作为后备广告:

<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> 

答案 1 :(得分:1)

假设您有一个名为home的控制器。您可以像这样使用iframe

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

并使用jQuery显示/隐藏div。

答案 2 :(得分:0)

我试过这个但是最后我做了这个因为我需要显示不同的pdf,这些pdf存储(只是完整路径)在DB和共享文件夹中,然后我有向用户逐一展示,希望它对你有用!

在模态体内部的视图上。

<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>

在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);

和js与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");
            }

        }
    });
}