如何在模态窗口中显示.pdf文件?

时间:2018-05-03 09:11:03

标签: jquery asp.net-mvc twitter-bootstrap pdf

我在服务器上有.pdf.html文件。我想在模态窗口中显示.pdf文件。目前,我的.html文件工作正常。

@item.ExampleUrl为我提供了.pdf.html个文件。

请建议我如何在模式中填充.pdf

请查看截图

中的.pdf文件

enter image description here

脚本

 $(document).ready(function () {
            $('.openExamplefile').on('click', function () {
                debugger;
                var url = $(this).attr("data-url"); //page url  
                if (url == "/files/examples/" || url == "/files/examples/ ") {
                    alert("There is no html file exists!")
                }
                else {
                    $("#PedigreesSireRacingModal").load(url, function () {
                      $("#PedigreesSireRacing").modal({ show: true });
                    });
                }

            });

        });

控制器

public FileResult Download(string FileName)
{           
            return File("~/files/examples/" + FileName, MimeMapping.GetMimeMapping(FileName),FileName);
}

我的模态

<button id="ButtontoLink" type="button" class="openExamplefile" 
     data-url="/files/examples/@item.ExampleUrl">Example</button>

<div class="modal" id="PedigreesSireRacing" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width:1250px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><label id="ProductName"></label>  </h4>
            </div>
            <div id="PedigreesSireRacingModal" class="modal-body racing">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

4 个答案:

答案 0 :(得分:1)

只需将<enbed src="">添加到您<div>中即可。 它也以模式运行。 例子;

<div>
<embed src="https://YourPdf" frameborder="0" width="100%" height="400px">
</div>

或模态:

<div id="YouModal"> <embed src="https://YourPdf" frameborder="0" width="100%" height="400px">

答案 1 :(得分:0)

您可以在模式中使用<embed>标记,如此

<button id="ButtontoLink" type="button" class="openExamplefile" 
     data-url="/files/examples/@item.ExampleUrl">Example</button>

<div class="modal" id="PedigreesSireRacing" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width:1250px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><label id="ProductName"></label></h4>
            </div>
            <div id="PedigreesSireRacingModal" class="modal-body racing">
                <embed src="/path/to/pdf_file.pdf" type="application/pdf" width="100%" height="100%">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

答案 2 :(得分:0)

您是否尝试将pdf嵌入模态中?像这样:

<embed src="pdf-example.pdf" frameborder="0" width="100%" height="400px">

答案 3 :(得分:0)

尝试使用FileStreamResult作为返回类型而不是FileResult

public ActionResult Download(string fileName)
{
    var stream = new FileStream(Server.MapPath("~/files/examples/" + fileName), FileMode.Open, FileAccess.Read);

    var result = new FileStreamResult(stream, "application/pdf");

    return result;
}

然后将<embed>标记放在模态<div>元素中作为PDF占位符:

<div id="PedigreesSireRacingModal" class="modal-body racing">
    <embed src="@Url.Action("Download", "ControllerName", new { fileName = "FileName.pdf" })" width="100%" height="100%" type="application/pdf">
    </embed>
</div>

更新1:

由于您可以返回HTML或PDF格式,因此请检查文件扩展名,并在控制器和embed / object标记中使用正确的内容类型:

<强>控制器

public ActionResult Download(string fileName)
{
    string path = Server.MapPath("~/files/examples/" + fileName);
    var stream = new FileStream(path, FileMode.Open, FileAccess.Read);

    string contentType = MimeMapping.GetMimeMapping(path);

    var result = new FileStreamResult(stream, contentType);

    return result;
}

查看

<!-- example if using viewmodel property -->
<object data="@Url.Action("Download", "ControllerName", new { fileName = Model.FileName })" width="100%" height="100%">
</object>

<embed src="@Url.Action("Download", "ControllerName", new { fileName = Model.FileName })" width="100%" height="100%" type="@Model.ContentType">
</embed>

作为旁注,请尝试在控制器操作方法中使用Content-Disposition响应标头设置,以确保正确设置文件类型:

var contentDisposition = new System.Net.Mime.ContentDisposition
{
    FileName = fileName,
    Inline = true
};

Response.Headers.Add("Content-Disposition", contentDisposition.ToString());