如何使用 javascript、jquery 等创建打印模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6638424/
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
how to create a print modal using javascript, jquery etc
提问by paul
let say i have a print button on couple of pages and whenever user click . it will pop up the content in a modal and can print from there.Any idea will be appreciated.
假设我在几页上有一个打印按钮，每当用户单击时。它将以模态形式弹出内容并可以从那里打印。任何想法将不胜感激。
I have couple of page with a print button . when user click it need to pul that content in a modal and than print from that modal.
我有几页带有打印按钮。当用户单击它时，需要将该内容拉入模态，然后从该模态打印。
回答by tsdexter
I can't write the code for you right now but I can put you on the right track..
我现在无法为您编写代码，但我可以让您走上正轨。
You need to use jquery to get the contents you want to print (likely $('body').html();) then create your modal div popup and add an iframe into the modal div. Then add to the iframes body (via $('iframe').document.body.append();) the print content. Then, call printon the iframe ($('iframe').window.print;)
您需要使用 jquery 获取要打印的内容（可能$('body').html();），然后创建模态 div 弹出窗口并将 iframe 添加到模态 div 中。然后将$('iframe').document.body.append();打印内容添加到 iframes 正文（通过）。然后，调用printiframe ( $('iframe').window.print;)
Let me know if this makes sense?
让我知道这是否有意义？
EDIT: Here is some example code working with what I believe you want. (make sure you include jquery before this javascript code)
编辑：这是一些示例代码，可以使用我认为您想要的内容。（确保在此 javascript 代码之前包含 jquery）
<body>
<script>
$(document).ready(function(){
$('#printmodal').click(function(){
// variables
var contents = $('#printable').html();
var frame = $('#printframe')[0].contentWindow.document;
// show the modal div
$('#modal').css({'display':'block'});
// open the frame document and add the contents
frame.open();
frame.write(contents);
frame.close();
// print just the modal div
$('#printframe')[0].contentWindow.print();
});
});
</script>
<style>
#modal {
display: none;
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
top: 100px;
}
</style>
<!-- Printable div (or you can just use any element) -->
<div id="printable">
<p>This is</p>
<p>printable</p>
</div>
<!-- Print link -->
<a id="printmodal" href="#">Print Me</a>
<!-- Modal div (intially hidden) -->
<div id="modal">
<iframe id="printframe" />
</div>
</body>
jsfiddle: http://jsfiddle.net/tsdexter/ke2rqt97/
jsfiddle：http: //jsfiddle.net/tsdexter/ke2rqt97/
