我在服务器上有.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">×</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>
答案 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">×</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());