javascript - 以模态打开pdf文件可能吗？

Question

我正在考虑以模式打开 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)
        }
    });
}

Controller 中的 Action :

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

Answer 1

另一种方法是从 json 请求传递 pdf 路径，然后在模态 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});
}

---

编辑:为了在可能不支持 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>