add: jqpring添加jquery内置打印功能
hello
parent
c10d5f5cfb
commit
83fe3d9578
|
|
@ -377,6 +377,10 @@
|
|||
{
|
||||
"title": "okLayx",
|
||||
"href": "pages/tripartite/okLayx.html"
|
||||
},
|
||||
{
|
||||
"title": "jqprint",
|
||||
"href": "pages/tripartite/jqprint.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
// -----------------------------------------------------------------------
|
||||
// Eros Fratini - eros@recoding.it
|
||||
// jqprint 0.3
|
||||
//
|
||||
// - 19/06/2009 - some new implementations, added Opera support
|
||||
// - 11/05/2009 - first sketch
|
||||
//
|
||||
// Printing plug-in for jQuery, evolution of jPrintArea: http://plugins.jquery.com/project/jPrintArea
|
||||
// requires jQuery 1.3.x
|
||||
//
|
||||
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
|
||||
//------------------------------------------------------------------------
|
||||
"use strict";
|
||||
layui.define(["jquery"], function (exports) {
|
||||
var $ = layui.jquery;
|
||||
var opt;
|
||||
$.fn.jqprint = function (options) {
|
||||
opt = $.extend({}, $.fn.jqprint.defaults, options);
|
||||
|
||||
var $element = (this instanceof layui.jquery) ? this : $(this);
|
||||
|
||||
if (opt.operaSupport && $.support.opera)
|
||||
{
|
||||
var tab = window.open("","jqPrint-preview");
|
||||
tab.document.open();
|
||||
|
||||
var doc = tab.document;
|
||||
}
|
||||
else
|
||||
{
|
||||
var $iframe = $("<iframe />");
|
||||
|
||||
if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); }
|
||||
|
||||
$iframe.appendTo("body");
|
||||
var doc = $iframe[0].contentWindow.document;
|
||||
}
|
||||
|
||||
if (opt.importCSS)
|
||||
{
|
||||
if ($("link[media=print]").length > 0)
|
||||
{
|
||||
$("link[media=print]").each( function() {
|
||||
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
$("link").each( function() {
|
||||
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (opt.printContainer) { doc.write($element.outer()); }
|
||||
else { $element.each( function() { doc.write($(this).html()); }); }
|
||||
|
||||
doc.close();
|
||||
|
||||
(opt.operaSupport && $.support.opera ? tab : $iframe[0].contentWindow).focus();
|
||||
setTimeout( function() { (opt.operaSupport && $.support.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000);
|
||||
}
|
||||
|
||||
$.fn.jqprint.defaults = {
|
||||
debug: false,
|
||||
importCSS: true,
|
||||
printContainer: true,
|
||||
operaSupport: true
|
||||
};
|
||||
|
||||
// Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
|
||||
$.fn.outer = function() {
|
||||
return $($('<div></div>').html(this.clone())).html();
|
||||
}
|
||||
|
||||
exports("jqprint", {});
|
||||
})
|
||||
/*(function($) {
|
||||
var opt;
|
||||
|
||||
$.fn.jqprint = function (options) {
|
||||
opt = $.extend({}, $.fn.jqprint.defaults, options);
|
||||
|
||||
var $element = (this instanceof $) ? this : $(this);
|
||||
|
||||
if (opt.operaSupport && $.browser.opera)
|
||||
{
|
||||
var tab = window.open("","jqPrint-preview");
|
||||
tab.document.open();
|
||||
|
||||
var doc = tab.document;
|
||||
}
|
||||
else
|
||||
{
|
||||
var $iframe = $("<iframe />");
|
||||
|
||||
if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); }
|
||||
|
||||
$iframe.appendTo("body");
|
||||
var doc = $iframe[0].contentWindow.document;
|
||||
}
|
||||
|
||||
if (opt.importCSS)
|
||||
{
|
||||
if ($("link[media=print]").length > 0)
|
||||
{
|
||||
$("link[media=print]").each( function() {
|
||||
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
$("link").each( function() {
|
||||
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (opt.printContainer) { doc.write($element.outer()); }
|
||||
else { $element.each( function() { doc.write($(this).html()); }); }
|
||||
|
||||
doc.close();
|
||||
|
||||
(opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
|
||||
setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000);
|
||||
}
|
||||
|
||||
$.fn.jqprint.defaults = {
|
||||
debug: false,
|
||||
importCSS: true,
|
||||
printContainer: true,
|
||||
operaSupport: true
|
||||
};
|
||||
|
||||
// Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
|
||||
$.fn.outer = function() {
|
||||
return $($('<div></div>').html(this.clone())).html();
|
||||
}
|
||||
})(jQuery);*/
|
||||
|
|
@ -44,6 +44,7 @@ if (!Object.assign) {
|
|||
"okSweetAlert2": "okmodules/okSweetAlert2",
|
||||
"okHoliday": "okmodules/okHoliday",
|
||||
"okLayx": "okmodules/okLayx",
|
||||
"jqprint": "okmodules/jqprint",
|
||||
};
|
||||
var modulePath = Object.assign({
|
||||
layer: "modules/layer",
|
||||
|
|
@ -318,4 +319,4 @@ if (!Object.assign) {
|
|||
c && layui.each(t, s)))
|
||||
}), i)
|
||||
}, e.layui = new r
|
||||
}(window);
|
||||
}(window);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>打印</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/common.css">
|
||||
<style>
|
||||
.ok-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 16px;
|
||||
}
|
||||
.b1 {
|
||||
border: 1px solid #EAEBF0;
|
||||
}
|
||||
.layui-card-header {
|
||||
font-size: 16px;
|
||||
}
|
||||
.layui-card-body {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="ok-body-scroll">
|
||||
<div class="ok-body">
|
||||
<blockquote class="layui-elem-quote">
|
||||
<p>打印 okPrint</p>
|
||||
<p>1. 创建对象</p>
|
||||
<p>2. 调用对象的start方法执行</p>
|
||||
</blockquote>
|
||||
<pre lay-title="JavaScript">
|
||||
layui.use(['code', 'jquery', 'jqprint'], function () {
|
||||
var $ = layui.jquery,
|
||||
code = layui.code;
|
||||
|
||||
$('#btnPrint').click(function (){
|
||||
$('#content').jqprint();
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-card b1">
|
||||
<div class="layui-card-header">最简单的例子</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="content">asdfasdfadsf</div>
|
||||
<div id="btnPrint" class="layui-btn layui-btn-primary">打印</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../lib/layui/layui.js"></script>
|
||||
<script type="text/javascript">
|
||||
layui.use(['code', 'jquery', 'jqprint'], function () {
|
||||
var $ = layui.jquery,
|
||||
code = layui.code;
|
||||
|
||||
$('#btnPrint').click(function (){
|
||||
$('#content').jqprint();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue