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

k97glaaz 于 2023-02-14 发布在 Bootstrap

关注(0)|答案(5)|浏览(386)

我在服务器上有.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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/50151166/how-to-display-pdf-file-in-modal-window

5条答案

按热度按时间

zvms9eto1#

只需添加一个<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">

赞(0）回复(0）举报 2023-02-14

ktecyv1j2#

您可以在modal中使用<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>

赞(0）回复(0）举报 2023-02-14

p1iqtdky3#

你试过把pdf文件嵌入到模态文件中吗？就像这样：

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

赞(0）回复(0）举报 2023-02-14

r1zhe5dt4#

尝试使用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>标记作为PDF占位符放入模态<div>元素中：

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

赞(0）回复(0）举报 2023-02-14

lx0bsm1f5#

我已经使用了堆栈溢出解决方案之一的变体。虽然我想在我的网页上的按钮访问一个模态弹出窗口中的搜索设施。
PDF文件是一个可搜索的文件，从1957年的约2,270条目的士兵姓名和坟墓的位置。
到目前为止，我看到的唯一错误是Chrome没有显示像Edge和Moazilla这样的文档放大镜图标，但仍然支持CTRL-F搜索。
主页中的调用例程为：

<a href="https://ratsoftobruk.com.au/war-graves/SEARCH.html" target="_blank"
  onclick="window.open('https://web-server/sub-folder/SEARCH.html','SEARCHER','resizable,height=900,width=1200'); return false;">Search Grave<br>Register</a>

模态的SEARCH.html代码为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tobruk War Cemetery Vol 1 & 2</title>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>
</head>
<body>
 <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                        <embed src="https://web-server/directory/name-of-the-pdf.pdf" frameborder="0" width="100%" height="700px">
            </div>
        </div>
    </div>
</div>
</body>
</html>

赞(0）回复(0）举报 2023-02-14

我来回答

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

5条答案

相关问题

热门标签

最新问答