[英]PDF file to be displayed on the dialog modal via bootstrap
我的要求是,單擊按鈕時,應在對話框模式上顯示 pdf 文件。 請幫忙!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>View PDF</h2>
<!-- Trigger the modal with a button -->
<button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
您還可以將 pdf 嵌入到模態中。 像這樣:
<embed src="sample.pdf" frameborder="0" width="100%" height="400px">
那對我有用
很抱歉讓您失望,但默認情況下不能只在模態中顯示 pdf。 這不是預期的行為。 即使使用<iframe>
,您也無法在引導模式中渲染 pdf。 此外,大多數在線提供的黑客不支持跨瀏覽器。 更理想的方法是使用相同的插件,我會給你幾個使用的鏈接,你可以實現你想要的。
1)結帳PDFObject
JS,
<script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script>
PDFObject 將 PDF 文件嵌入到 HTML 文檔中。 鏈接。
2) 用於 Bootstrap 的 Easy Modal 插件。 演示片段和網站
3) 使用 jQuery 對話框模態彈出窗口。 演示。
希望它有所幫助。
<div class="modal fade" id="modal-agreement">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<object type="application/pdf" data="path/to/pdf" width="100%" height="500" style="height: 85vh;">No Support</object>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
你也可以試試這個
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>DisplayPDF</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> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px"> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </body> </html>
可以在模態/彈出窗口中添加 iframe。
<iframe src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="600" height="780" style="position: absolute;top: 66px;bottom: 0px;right: 0px;width: 100%;border: none;margin: 0;padding: 0;overflow: hidden;z-index: 3;height: 100%;"></iframe>
根據您的要求,您可以設置參數的樣式。
在 JS 中使用 Vuejs 顯示 pdf 的全屏模態。
html
<div class="modal " tabindex="-1" id="idXyz">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">[[formName]]</h5>
<button type="button" class="btn btn-danger"
data-bs-dismiss="modal" aria-label="Close">close
</button>
</div>
<div class="modal-body">
<embed v-bind:src="getUrl" frameborder="0" width="100%" height="100%">
</div>
</div>
</div>
</div>
Javascript
var pdfVueModal = new Vue({
el: '#idXyz',
data: {
getUrl: null,
formName: null
},
methods: {
showPdf: function (getUrl, formName) {
this.getUrl = getUrl;
this.formName = formName;
$('#idXyz').modal('show');
}
},
delimiters: ["[[", "]]"],
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.