Javascript Twitter Bootstrap：打印模态窗口的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12181760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: Print content of modal window
提问by MattSull
I'm developing a site using Bootstrap which has 28 modal windows with information on different products. I want to be able to print the information in an open modal window. Each window has an id.
我正在使用 Bootstrap 开发一个站点，该站点有 28 个模式窗口，其中包含有关不同产品的信息。我希望能够在打开的模式窗口中打印信息。每个窗口都有一个id.
<!-- firecell panel & radio hub -->
<div class="modal hide fade" id="fcpanelhub">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3>5000 Control Panel & Radio Hub</h3>
</div>
<div class="modal-body">
<img src="../site/img/firecell/firecell-panel-info-1.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-panel-info-2.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-radio-hub-info-1.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-radio-hub-info-2.png" alt=""/>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
So if I add in a new button in modal-footer- 'print', and it's clicked I want that modal to print. Would I be right in saying javascript would be used? If so, how do I tell javascript to print only the open modal, and not the others?
因此，如果我在modal-footer“打印”中添加一个新按钮，然后单击它，我希望打印该模态。我说 javascript 会被使用是对的吗？如果是这样，我如何告诉 javascript 只打印打开的模式，而不是其他模式？
All help appreciated.
所有帮助表示赞赏。
回答by ComFreek
Another solution
另一种解决方案
Here is a new solution based on Bennett McElwee answerin the same questionas mentioned below.
这是基于Bennett McElwee在下面提到的同一问题中回答的新解决方案。
Tested with IE 9 & 10, Opera 12.01, Google Chrome 22 and Firefox 15.0.
jsFiddle example
使用 IE 9 & 10、Opera 12.01、Google Chrome 22 和 Firefox 15.0 进行测试。
jsFiddle 示例
1.) Add this CSS to your site:
1.) 将此 CSS 添加到您的站点：
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
2.) Add my JavaScript function
2.) 添加我的 JavaScript 函数
function printElement(elem, append, delimiter) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
$printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
if (append !== true) {
$printSection.innerHTML = "";
}
else if (append === true) {
if (typeof (delimiter) === "string") {
$printSection.innerHTML += delimiter;
}
else if (typeof (delimiter) === "object") {
$printSection.appendChild(delimiter);
}
}
$printSection.appendChild(domClone);
}?
You're ready to print any element on your site!
Just call printElement()with your element(s) and execute window.print()when you're finished.
您已准备好在您的网站上打印任何元素！
只需调用printElement()您的元素并window.print()在完成后执行。
Note:If you want to modify the content before it is printed (and only in the print version), checkout this example (provided by waspina in the comments): http://jsfiddle.net/95ezN/121/
注意：如果您想在打印之前修改内容（并且仅在打印版本中），请查看此示例（由评论中的 waspina 提供）：http: //jsfiddle.net/95ezN/121/
One could also use CSS in order to show the additional content in the print version (and only there).
还可以使用 CSS 来显示打印版本中的附加内容（并且仅在那里）。
Former solution
以前的解决方案
I think, you have to hide all other parts of the site via CSS.
我认为，您必须通过 CSS 隐藏网站的所有其他部分。
It would be the best, to move all non-printable content into a separate DIV:
最好将所有不可打印的内容移动到一个单独的DIV：
<body>
<div class="non-printable">
<!-- ... -->
</div>
<div class="printable">
<!-- Modal dialog comes here -->
</div>
</body>
And then in your CSS:
然后在你的 CSS 中：
.printable { display: none; }
@media print
{
.non-printable { display: none; }
.printable { display: block; }
}
Credits go to Gregwho has already answered a similar question: Print <div id="printarea"></div> only?
致谢Greg，他已经回答了一个类似的问题：仅打印 <div id="printarea"></div>？
There is one problem in using JavaScript: the user cannot see a preview - at least in Internet Explorer!
使用 JavaScript存在一个问题：用户无法看到预览 - 至少在 Internet Explorer 中！
回答by maxisam
I would suggest you try this jQuery plugin print element
我建议你试试这个 jQuery 插件打印元素
It can let you just print the element you selected.
它可以让您只打印您选择的元素。
回答by dtrunk
With the currently accepted solution you cannot print the page which contains the dialog itself anymore. Here's a much more dynamic solution:
使用当前接受的解决方案，您无法再打印包含对话框本身的页面。这是一个更加动态的解决方案：
JavaScript:
JavaScript：
$().ready(function () {
$('.modal.printable').on('shown.bs.modal', function () {
$('.modal-dialog', this).addClass('focused');
$('body').addClass('modalprinter');
if ($(this).hasClass('autoprint')) {
window.print();
}
}).on('hidden.bs.modal', function () {
$('.modal-dialog', this).removeClass('focused');
$('body').removeClass('modalprinter');
});
});
CSS:
CSS：
@media print {
body.modalprinter * {
visibility: hidden;
}
body.modalprinter .modal-dialog.focused {
position: absolute;
padding: 0;
margin: 0;
left: 0;
top: 0;
}
body.modalprinter .modal-dialog.focused .modal-content {
border-width: 0;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
body.modalprinter .modal-dialog.focused .modal-content .modal-body,
body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
visibility: visible;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header,
body.modalprinter .modal-dialog.focused .modal-content .modal-body {
padding: 0;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
margin-bottom: 20px;
}
}
Example:
例子：
<div class="modal fade printable autoprint">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="window.print();">Print</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by bostero2
Here's an option using a JQuery extension I made based on the code by waspinator in the comments of the accepted answer:
这是一个使用 JQuery 扩展的选项，我根据已接受答案的评论中的 waspinator 代码制作：
jQuery.fn.extend({
printElem: function() {
var cloned = this.clone();
var printSection = $('#printSection');
if (printSection.length == 0) {
printSection = $('<div id="printSection"></div>')
$('body').append(printSection);
}
printSection.append(cloned);
var toggleBody = $('body *:visible');
toggleBody.hide();
$('#printSection, #printSection *').show();
window.print();
printSection.remove();
toggleBody.show();
}
});
$(document).ready(function(){
$(document).on('click', '#btnPrint', function(){
$('.printMe').printElem();
});
});
JSFiddle: http://jsfiddle.net/95ezN/1227/
JSFiddle：http: //jsfiddle.net/95ezN/1227/
This can be useful if you don't want to have this applied to every single print and just do it on your custom print button (which was my case).
如果您不想将其应用于每一次打印，而只是在您的自定义打印按钮上执行此操作（这就是我的情况），这将非常有用。
回答by Kara Johnson
This is a revised solution that will also work for modal windows rendered using a Grails template, where you can have the same modal template called multiple times (with different values) in the same body. This thread helped me immensely, so I thought I'd share it in case other Grails users found their way here.
这是一个修订的解决方案，也适用于使用 Grails 模板渲染的模态窗口，您可以在同一主体中多次调用相同的模态模板（使用不同的值）。这个线程对我帮助很大，所以我想我会分享它，以防其他 Grails 用户在这里找到他们的方法。
For those who are curious, the accepted solution didn't work for me because I am rendering a table; each row has a button that opens a modal window with more details about the record. This led to multiple printSection divs being created and printed on top of each other. Therefore I had to revise the js to clean up the div after it was done printing.
对于那些好奇的人，接受的解决方案对我不起作用，因为我正在渲染一张表格；每行都有一个按钮，可以打开一个模式窗口，其中包含有关记录的更多详细信息。这导致多个 printSection div 被创建并打印在彼此之上。因此，我不得不在完成打印后修改 js 以清理 div。
CSS
CSS
I added this CSS directly to my modal gsp, but adding it to the parent has the same effect.
我将此 CSS 直接添加到我的模态 gsp 中，但将其添加到父级具有相同的效果。
<style type="text/css">
@media screen {
#printSection {
display: none;
}
}
@media print {
body > *:not(#printSection) {
display: none;
}
#printSection, #printSection * {
visibility: visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
</style>
Adding it to the site-wide CSS killed the print functionality in other parts of the site. I got this from ComFreak's accepted answer (based on Bennett McElwee answer), but it is revised using ':not' functionality from fanfavorite's answer on Print <div id=printarea></div> only?. I opted for 'display' rather than 'visibility' because my invisible body content was creating extra blank pages, which was unacceptable to my users.
将它添加到站点范围的 CSS 中会杀死站点其他部分的打印功能。我从ComFreak接受的答案中得到了这个（基于Bennett McElwee 的答案），但它是使用 ':not' 功能从fanfavorite's answer on Print <div id=printarea></div> 修改的吗？. 我选择了“显示”而不是“可见性”，因为我不可见的正文内容会创建额外的空白页面，这是我的用户无法接受的。
js
js
And this to my javascript, revised from ComFreak's accepted answer to this question.
这对于我的 javascript，从ComFreak对这个问题的公认答案进行了修订。
function printDiv(div) {
// Create and insert new print section
var elem = document.getElementById(div);
var domClone = elem.cloneNode(true);
var $printSection = document.createElement("div");
$printSection.id = "printSection";
$printSection.appendChild(domClone);
document.body.insertBefore($printSection, document.body.firstChild);
window.print();
// Clean up print section for future use
var oldElem = document.getElementById("printSection");
if (oldElem != null) { oldElem.parentNode.removeChild(oldElem); }
//oldElem.remove() not supported by IE
return true;
}
I had no need for appending elements, so I removed that aspect and changed the function to specifically print a div.
我不需要附加元素，所以我删除了那个方面并将函数更改为专门打印一个 div。
HTML (gsp)
HTML (gsp)
And the modal template. This prints the modal header & body and excludes the footer, where the buttons were located.
和模态模板。这将打印模态页眉和正文并排除按钮所在的页脚。
<div class="modal-content">
<div id="print-me"> <!-- This is the div that is cloned and printed -->
<div class="modal-header">
<!-- HEADER CONTENT -->
</div>
<div class="modal-body">
<!-- BODY CONTENT -->
</div>
</div>
<div class="modal-footer">
<!-- This is where I specify the div to print -->
<button type="button" class="btn btn-default" onclick="printDiv('print-me')">Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
I hope that helps someone!
我希望能帮助别人！
回答by alexoviedo999
I just use a bit of jQuery/javascript:
我只是使用了一点 jQuery/javascript：
html:
html：
<h1>Don't Print</h1>
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch modal</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal to print</h3>
</div>
<div class="modal-body">
<p>Print Me</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="printButton">Print</button>
</div>
</div>
js:
js：
$('#printButton').on('click', function () {
if ($('.modal').is(':visible')) {
var modalId = $(event.target).closest('.modal').attr('id');
$('body').css('visibility', 'hidden');
$("#" + modalId).css('visibility', 'visible');
$('#' + modalId).removeClass('modal');
window.print();
$('body').css('visibility', 'visible');
$('#' + modalId).addClass('modal');
} else {
window.print();
}
});
here is the fiddle
这是小提琴
回答by Peter Kerr
Heres a solution with no Javascript or plugin - just some css and one extra class in the markup. This solutions uses the fact that BootStrap adds a class to the body when a dialog is open. We use this class to then hide the body, and print only the dialog.
这是一个没有 Javascript 或插件的解决方案 - 只有一些 css 和标记中的一个额外类。此解决方案使用 BootStrap 在打开对话框时向正文添加类的事实。我们使用这个类来隐藏主体，并只打印对话框。
To ensure we can determine the main body of the page we need to contain everything within the main page content in a div - I've used id="mainContent". Sample Page layout below - with a main page and two dialogs
为了确保我们可以确定页面的主体，我们需要在 div 中包含主页内容中的所有内容 - 我使用了 id="mainContent"。下面的示例页面布局 - 带有一个主页和两个对话框
<body>
<div class="container body-content">
<div id="mainContent">
main page stuff
</div>
<!-- Dialog One -->
<div class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Dialog Two -->
<div class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
</div>
</body>
Then in our CSS print media queries, I use display: none to hide everything I don't want displayed - ie the mainContent when a dialog is open. I also use a specific class noPrint to be used on any parts of the page that should not be displayed - say action buttons. Here I am also hiding the headers and footers. You may need to tweak it to get exactly want you want.
然后在我们的 CSS 打印媒体查询中，我使用 display: none 隐藏我不想显示的所有内容 - 即打开对话框时的 mainContent 。我还使用了一个特定的类 noPrint 用于页面的任何不应显示的部分 - 例如操作按钮。在这里，我还隐藏了页眉和页脚。您可能需要对其进行调整以完全达到您想要的效果。
@media print {
header, .footer, footer {
display: none;
}
/* hide main content when dialog open */
body.modal-open div.container.body-content div#mainContent {
display: none;
}
.noPrint {
display: none;
}
}
回答by Nadeemmnn Mohd
I was facing two issues Issue 1: all fields were coming one after other and Issue 2 white space at the bottom of the page when used to print from popup.
我面临两个问题问题 1：当用于从弹出窗口打印时，所有字段都一个接一个出现，并且页面底部的问题 2 空白。
I Resolved this by
我解决了这个问题
making display noneto all body * elements most of them go for visibility hidden which creates space so avoid visibility hidden
使所有身体都没有显示* 元素中的大多数都隐藏可见性，从而创造空间，因此避免隐藏可见性
@media print {
body * {
display:none;
width:auto;
height:auto;
margin:0px;padding:0px;
}
#printSection, #printSection * {
display:inline-block!important;
}
#printSection {
position:absolute;
left:0;
top:0;
margin:0px;
page-break-before: none;
page-break-after: none;
page-break-inside: avoid;
}
#printSection .form-group{
width:100%!important;
float:left!important;
page-break-after: avoid;
}
#printSection label{
float:left!important;
width:200px!important;
display:inline-block!important;
}
#printSection .form-control.search-input{
float:left!important;
width:200px!important;
display: inline-block!important;
}
}
回答by Fouad Mekkey
you can download printThis lib from this source https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.jsand include it into your html page
你可以从这个源https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js下载printThis库 并将其包含到你的html页面中
Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.
调用以下 jquery 打印所有内容，包括不可见的内容。如果您有多个 css 文件，您可以将 css 文件包含在一个数组中。
$("#modalDiv").printThis({
debug: false,
importCSS: true,
importStyle: true,
printContainer: true,
loadCSS: "../css/style.css",
pageTitle: "My Modal",
removeInline: false,
printDelay: 333,
header: null,
formValues: true
});
回答by Amin Emadi
@media print{
body{
visibility: hidden; /* no print*/
}
.print{
visibility:visible; /*print*/
}
}<body>
<div class="noprint"> <!---no print--->
<div class="noprint"> <!---no print--->
<div class="print"> <!---print--->
<div class="print"> <!---print--->
</body>