javascript 将 jquery 对话框的内容打印到打印机
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21001831/
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
Print content of jquery dialog to a printer
提问by user1032531
I have the following jQueryUI dialog. How can I print the content of the dialog? The content could be any HTML such as a table, image, etc. There were several earlier answers to this question,however, they appear to be out of date.
我有以下 jQueryUI 对话框。如何打印对话框的内容?内容可以是任何 HTML,例如表格、图像等。这个问题之前有几个答案,但是,它们似乎已经过时了。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function() {
$("#openDialog").click(function(){$("#myDialog").dialog('open')});
$( "#myDialog" ).dialog({
modal: true,
autoOpen : false,
buttons: {Ok: function() {alert('print');}}
});
});
</script>
</head>
<body>
<button id="openDialog">Click</button>
<div id="myDialog" title="My Dialog">
<p>Print this text!</p>
<img alt="And print this image" src="myImg.png">
</div>
</body>
</html>
回答by user1032531
I developed my own plugin with code is below, and a live example is located at http://jsfiddle.net/fyu4P/embedded/result/.
我用下面的代码开发了自己的插件,一个活生生的例子位于http://jsfiddle.net/fyu4P/embedded/result/。
On FF 26.0, it works, however, after printing a couple of times, FF asks the user if popups should be disabled which I wish not to happen. Also, it doesn't work with older IE, and likely other browsers. Don't worry, when printing, you still need to click the operating system print dialog, so you won't waste any paper! I've asked https://codereview.stackexchange.com/questions/39235/critique-of-jquery-plugin-which-will-print-to-a-printer-an-element-or-a-jqueryuifor any recommendations.
在 FF 26.0 上,它可以工作,但是,在打印几次后,FF 会询问用户是否应该禁用我不希望发生的弹出窗口。此外,它不适用于较旧的 IE,也可能不适用于其他浏览器。别着急,打印的时候还是要点击操作系统的打印对话框,不会浪费纸张!我已经向https://codereview.stackexchange.com/questions/39235/critique-of-jquery-plugin-which-will-print-to-a-printer-an-element-or-a-jqueryui询问任何建议.
Actual Plugin:
实际插件:
/*
* jQuery printIt
* Print's the selected elements to the printer
* Copyright Michael Reed, 2014
* Dual licensed under the MIT and GPL licenses.
*/
(function($){
var defaults = {
elems :null, //Element to print HTML
copy_css :false,//Copy CSS from original element
external_css :null //New external css file to apply
};
var methods = {
init : function (options) {
var settings = $.extend({}, defaults, options)
elems=$(settings.elems);
return this.each(function () {
$(this).click(function(e) {
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
$(iframe).load(function(){
elems.each(function(){
iframe.contentWindow.document.body.appendChild(this.cloneNode(true));
});
if(settings.copy_css) {
var arrStyleSheets = document.getElementsByTagName("link");
for (var i = 0; i < arrStyleSheets.length; i++){
iframe.contentWindow.document.head.appendChild(arrStyleSheets[i].cloneNode(true));
}
var arrStyle = document.getElementsByTagName("style");
for (var i = 0; i < arrStyle.length; i++){
iframe.contentWindow.document.head.appendChild(arrStyle[i].cloneNode(true));
}
}
if(settings.external_css) {
var style = document.createElement("link")
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = settings.external_css;
iframe.contentWindow.document.head.appendChild(style);
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = 'window.print();';
iframe.contentWindow.document.head.appendChild(script);
$(iframe).hide();
});
});
});
},
destroy : function () {
//Anything else I should do here?
delete settings;
return this.each(function () {});
}
};
$.fn.printIt = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.printIt');
}
};
}(jQuery)
);
To configure:
配置:
$(function () {
$("#openDialog").click(function () {
$("#myDialog").dialog('open')
});
$("#myDialog").dialog({
modal: true,
autoOpen: false
});
$('#printIt').printIt({
elems: $("#myDialog"),
copy_css: true,
external_css: 'test2.css'
});
});
回答by Mayank
Try like below.....and call your div id. You should be good to go.
尝试如下.....并调用您的 div id。你应该很高兴去。
buttons: {
"Print": function() {
$("#dialog").printArea();
},
"Close": function() {
$(this).dialog("close");
}
}
回答by Robert W. Hunter
This will add a printable area, and puts modal html into it.
这将添加一个可打印区域,并将模态 html 放入其中。
$(function () {
$("#openDialog").click(function () {
$("#myDialog").dialog('open')
});
$("#myDialog").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function (e) {
$('#divToPrint').html($(this)[0].innerHTML).printArea();
}
}
});
});
You need to create a new <div id="divToPrint"></div>
if you want to not display the new div, just use style="display: none;"
<div id="divToPrint"></div>
如果你不想显示新的div,你需要创建一个新的,只需使用style="display: none;"
Then when you press CTRL+P it will print what you created...
然后当您按 CTRL+P 时,它将打印您创建的内容...