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

Posted 2023-05-08

【中文标题】如何在模态窗口中显示 .pdf 文件？

【英文标题】：How to display .pdf file in modal window?

【发布时间】：2018-10-13 12:55:54

【问题描述】：

我在服务器上有.pdf 和.html 文件。我想在模态窗口中显示.pdf 文件。目前，我的 .html 文件运行良好。

@item.ExampleUrl 给我.pdf 和.html 文件。

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

请查看截图中的.pdf文件

脚本

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

【参考方案1】：

只需将<enbed src=""> 添加到您的<div> 中。 它也在模态中工作。 示例；

<div>
<embed src="https://YourPdf" frameborder="0"  >
</div>

或在模态中：

<div id="YouModal"> <embed src="https://YourPdf" frameborder="0"  >

【参考方案2】：

您可以像这样在模态框内使用<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"  >
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

【讨论】：

此代码无效。我得到了与我在这里包含的相同的输出。我想我必须在 JQuery 中做点什么，因为这给了我url。

你得到文件的真实路径了吗？

是的，我正在获取路径var url = $(this).attr("data-url");。

【参考方案3】：

您是否尝试将 pdf 嵌入到模态中？像这样：

<embed src="pdf-example.pdf" frameborder="0"  >

【讨论】：

此代码无效。我得到相同的输出。请给我适当的解决方案。

【参考方案4】：

尝试使用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;

然后在模态<div>元素内放置一个<embed>标签作为PDF占位符：

<div id="PedigreesSireRacingModal" class="modal-body racing">
    <embed src="@Url.Action("Download", "ControllerName", new  fileName = "FileName.pdf" )"   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 )"  >
</object>

<embed src="@Url.Action("Download", "ControllerName", new  fileName = Model.FileName )"   type="@Model.ContentType">
</embed>

附带说明，请尝试在控制器操作方法中使用Content-Disposition 响应标头设置以确保正确设置文件类型：

var contentDisposition = new System.Net.Mime.ContentDisposition

    FileName = fileName,
    Inline = true
;

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

【讨论】：

我的网络路径现在不工作了。所以，我明天试试看。谢谢你的回答。

我也有.html 文件，所以现在每次您的代码在public ActionResult Download(string fileName) 部分发送它。我得到了.html 和.pdf。我想，我必须检查文件是否为 .pdf`，然后将其发送到您的代码，否则只需显示 .html 文件。我们应该怎么做。请指导我解决这个问题。

嗯，我想你需要检查传递的文件扩展名是HTML还是PDF，并使用object或iframe标签，可以通过不同的MIME类型呈现它们。跨度>

在哪里写这个视图代码，因为我想在模型中显示报告。如果我在模式中编写此代码，那么我应该如何修改我的 JQuery 脚本。请给我建议。

据我阅读您的问题，您有 2 个选择：使用带有文件名的 jQuery AJAX 作为 data 参数来呈现 embed/object 在模态对话框中包含文件内容的标签，或者通过视图模型属性传递文件名和内容类型，同时从 GET 请求返回视图，并在模式对话框中预先应用 embed/object 标记。下一步取决于您选择了哪个选项。