如何在模态窗口中显示.pdf文件? [英] How to display .pdf file in modal window?

问题描述

我在服务器上有.pdf和.html文件.我想在模式窗口中显示.pdf文件.目前，我的.html文件运行正常.

I have .pdf and .html file on the server. I want to display.pdf file in modal window. Currently, my .html file is working fine.

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

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

Please suggest me how to populate .pdf in the modal.

请在屏幕截图中查看.pdf文件

Please have a look on .pdf file in the screenshot

脚本

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

推荐答案

只需添加一个即可. 它也以模式运行. 例子; <div> <embed src="https://YourPdf" frameborder="0" width="100%" height="400px"> </div>

Just a add a into you . Also it works in modals. Example; <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">

这篇关于如何在模态窗口中显示.pdf文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！